mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-10-31 05:24:13 +00:00 
			
		
		
		
	UI整理
This commit is contained in:
		
							parent
							
								
									9c9cd168ee
								
							
						
					
					
						commit
						ba65226460
					
				
					 6 changed files with 100 additions and 36 deletions
				
			
		|  | @ -18,7 +18,6 @@ | ||||||
| 
 | 
 | ||||||
| <script lang="ts"> | <script lang="ts"> | ||||||
| import { defineComponent } from 'vue'; | import { defineComponent } from 'vue'; | ||||||
| import * as os from '@/os'; |  | ||||||
| 
 | 
 | ||||||
| export default defineComponent({ | export default defineComponent({ | ||||||
| 	props: { | 	props: { | ||||||
|  | @ -51,7 +50,7 @@ export default defineComponent({ | ||||||
| .novjtctn { | .novjtctn { | ||||||
| 	position: relative; | 	position: relative; | ||||||
| 	display: inline-block; | 	display: inline-block; | ||||||
| 	margin: 16px 32px 0 0; | 	margin: 8px 20px 0 0; | ||||||
| 	text-align: left; | 	text-align: left; | ||||||
| 	cursor: pointer; | 	cursor: pointer; | ||||||
| 	transition: all 0.3s; | 	transition: all 0.3s; | ||||||
|  |  | ||||||
							
								
								
									
										51
									
								
								src/client/components/ui/radios.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										51
									
								
								src/client/components/ui/radios.vue
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,51 @@ | ||||||
|  | <template> | ||||||
|  | <div | ||||||
|  | 	class="novjtcto" | ||||||
|  | > | ||||||
|  | 	<div><slot></slot></div> | ||||||
|  | 	<MkRadio v-for="def in defs" v-model="value" :value="def.value" :key="def.value">{{ def.label }}</MkRadio> | ||||||
|  | </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script lang="ts"> | ||||||
|  | import { defineComponent } from 'vue'; | ||||||
|  | import MkRadio from '@/components/ui/radio.vue'; | ||||||
|  | 
 | ||||||
|  | export default defineComponent({ | ||||||
|  | 	components: { | ||||||
|  | 		MkRadio | ||||||
|  | 	}, | ||||||
|  | 	props: { | ||||||
|  | 		defs: { | ||||||
|  | 			required: true | ||||||
|  | 		}, | ||||||
|  | 		modelValue: { | ||||||
|  | 			required: false | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			value: this.modelValue, | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		value() { | ||||||
|  | 			this.$emit('update:modelValue', this.value); | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | }); | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .novjtcto { | ||||||
|  | 	margin: 32px 0; | ||||||
|  | 
 | ||||||
|  | 	&:first-child { | ||||||
|  | 		margin-top: 0; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	&:last-child { | ||||||
|  | 		margin-bottom: 0; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -1,38 +1,44 @@ | ||||||
| <template> | <template> | ||||||
| <div class="_section"> | <div class=""> | ||||||
| 	<section class="_card _vMargin"> | 	<section class="_card _vMargin"> | ||||||
| 		<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div> | 		<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div> | ||||||
| 		<div class="_content"> | 		<div class="_content"> | ||||||
| 			<div>{{ $t('defaultNavigationBehaviour') }}</div> | 			<MkRadios v-model="serverDisconnectedBehavior" :defs="[ | ||||||
| 			<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch> | 					{ label: $t('_serverDisconnectedBehavior.reload'), value: 'reload' }, | ||||||
| 		</div> | 					{ label: $t('_serverDisconnectedBehavior.dialog'), value: 'dialog' }, | ||||||
| 		<div class="_content"> | 					{ label: $t('_serverDisconnectedBehavior.quiet'), value: 'quiet' }, | ||||||
| 			<div>{{ $t('whenServerDisconnected') }}</div> | 				]" | ||||||
| 			<MkRadio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</MkRadio> | 			> | ||||||
| 			<MkRadio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</MkRadio> | 				{{ $t('whenServerDisconnected') }} | ||||||
| 			<MkRadio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</MkRadio> | 			</MkRadios> | ||||||
| 		</div> |  | ||||||
| 		<div class="_content"> |  | ||||||
| 			<MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch> | 			<MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch> | ||||||
| 			<MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch> | 			<MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch> | ||||||
| 			<MkSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</MkSwitch> | 			<MkSwitch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</MkSwitch> | ||||||
| 			<MkSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</MkSwitch> | 			<MkSwitch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</MkSwitch> | ||||||
| 		</div> |  | ||||||
| 		<div class="_content"> |  | ||||||
| 			<div>{{ $t('chatOpenBehavior') }}</div> |  | ||||||
| 			<MkRadio v-model="chatOpenBehavior" value="page">{{ $t('showInPage') }}</MkRadio> |  | ||||||
| 			<MkRadio v-model="chatOpenBehavior" value="window">{{ $t('openInWindow') }}</MkRadio> |  | ||||||
| 			<MkRadio v-model="chatOpenBehavior" value="popout">{{ $t('popout') }}</MkRadio> |  | ||||||
| 		</div> |  | ||||||
| 		<div class="_content"> |  | ||||||
| 			<MkSelect v-model:value="lang"> | 			<MkSelect v-model:value="lang"> | ||||||
| 				<template #label>{{ $t('uiLanguage') }}</template> | 				<template #label>{{ $t('uiLanguage') }}</template> | ||||||
| 
 |  | ||||||
| 				<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> | 				<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> | ||||||
| 			</MkSelect> | 			</MkSelect> | ||||||
| 		</div> | 		</div> | ||||||
| 	</section> | 	</section> | ||||||
| 
 | 
 | ||||||
|  | 	<section class="_card _vMargin"> | ||||||
|  | 		<div class="_title"><Fa :icon="faCog"/> {{ $t('defaultNavigationBehaviour') }}</div> | ||||||
|  | 		<div class="_content"> | ||||||
|  | 			<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch> | ||||||
|  | 		</div> | ||||||
|  | 		<div class="_content"> | ||||||
|  | 			<MkRadios v-model="chatOpenBehavior" :defs="[ | ||||||
|  | 					{ label: $t('showInPage'), value: 'page' }, | ||||||
|  | 					{ label: $t('openInWindow'), value: 'window' }, | ||||||
|  | 					{ label: $t('popout'), value: 'popout' }, | ||||||
|  | 				]" | ||||||
|  | 			> | ||||||
|  | 				{{ $t('chatOpenBehavior') }} | ||||||
|  | 			</MkRadios> | ||||||
|  | 		</div> | ||||||
|  | 	</section> | ||||||
|  | 
 | ||||||
| 	<section class="_card _vMargin"> | 	<section class="_card _vMargin"> | ||||||
| 		<div class="_title"><Fa :icon="faCog"/> {{ $t('appearance') }}</div> | 		<div class="_title"><Fa :icon="faCog"/> {{ $t('appearance') }}</div> | ||||||
| 		<div class="_content"> | 		<div class="_content"> | ||||||
|  | @ -88,6 +94,7 @@ import MkButton from '@/components/ui/button.vue'; | ||||||
| import MkSwitch from '@/components/ui/switch.vue'; | import MkSwitch from '@/components/ui/switch.vue'; | ||||||
| import MkSelect from '@/components/ui/select.vue'; | import MkSelect from '@/components/ui/select.vue'; | ||||||
| import MkRadio from '@/components/ui/radio.vue'; | import MkRadio from '@/components/ui/radio.vue'; | ||||||
|  | import MkRadios from '@/components/ui/radios.vue'; | ||||||
| import MkRange from '@/components/ui/range.vue'; | import MkRange from '@/components/ui/range.vue'; | ||||||
| import { langs } from '@/config'; | import { langs } from '@/config'; | ||||||
| import { clientDb, set } from '@/db'; | import { clientDb, set } from '@/db'; | ||||||
|  | @ -99,6 +106,7 @@ export default defineComponent({ | ||||||
| 		MkSwitch, | 		MkSwitch, | ||||||
| 		MkSelect, | 		MkSelect, | ||||||
| 		MkRadio, | 		MkRadio, | ||||||
|  | 		MkRadios, | ||||||
| 		MkRange, | 		MkRange, | ||||||
| 	}, | 	}, | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -31,9 +31,7 @@ | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| 	<div class="main"> | 	<div class="main"> | ||||||
| 		<transition :name="($store.state.device.animation && !narrow) ? 'view-slide' : ''" appear mode="out-in"> |  | ||||||
| 		<component :is="component" @info="onInfo"/> | 		<component :is="component" @info="onInfo"/> | ||||||
| 		</transition> |  | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
|  | @ -109,14 +107,6 @@ export default defineComponent({ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .view-slide-enter-active, .view-slide-leave-active { |  | ||||||
| 	transition: opacity 0.3s, transform 0.3s !important; |  | ||||||
| } |  | ||||||
| .view-slide-enter-from, .view-slide-leave-to { |  | ||||||
| 	opacity: 0; |  | ||||||
| 	transform: translateX(32px); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .vvcocwet { | .vvcocwet { | ||||||
| 	> .nav { | 	> .nav { | ||||||
| 		> .menu { | 		> .menu { | ||||||
|  | @ -133,7 +123,7 @@ export default defineComponent({ | ||||||
| 				width: 100%; | 				width: 100%; | ||||||
| 				box-sizing: border-box; | 				box-sizing: border-box; | ||||||
| 				padding: 0 32px; | 				padding: 0 32px; | ||||||
| 				line-height: 48px; | 				line-height: 40px; | ||||||
| 				white-space: nowrap; | 				white-space: nowrap; | ||||||
| 				overflow: hidden; | 				overflow: hidden; | ||||||
| 				text-overflow: ellipsis; | 				text-overflow: ellipsis; | ||||||
|  | @ -168,10 +158,22 @@ export default defineComponent({ | ||||||
| 		> .nav { | 		> .nav { | ||||||
| 			width: 30%; | 			width: 30%; | ||||||
| 			max-width: 300px; | 			max-width: 300px; | ||||||
|  | 			font-size: 0.95em; | ||||||
|  | 			border-right: solid 1px var(--divider); | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		> .main { | 		> .main { | ||||||
| 			flex: 1; | 			flex: 1; | ||||||
|  | 			padding: 32px; | ||||||
|  | 			--baseContentWidth: 100%; | ||||||
|  | 
 | ||||||
|  | 			::v-deep(._section) { | ||||||
|  | 				padding: 0 0 32px 0; | ||||||
|  | 
 | ||||||
|  | 				& + ._section { | ||||||
|  | 					padding-top: 32px; | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,5 +1,5 @@ | ||||||
| <template> | <template> | ||||||
| <div class="_section"> | <div class=""> | ||||||
| 	<div class="rfqxtzch _card _vMargin"> | 	<div class="rfqxtzch _card _vMargin"> | ||||||
| 		<div class="_content"> | 		<div class="_content"> | ||||||
| 			<div class="darkMode" :class="{ disabled: syncDeviceDarkMode }"> | 			<div class="darkMode" :class="{ disabled: syncDeviceDarkMode }"> | ||||||
|  | @ -22,8 +22,12 @@ | ||||||
| 					</label> | 					</label> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
|  | 		</div> | ||||||
|  | 		<div class="_content"> | ||||||
| 			<MkSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</MkSwitch> | 			<MkSwitch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</MkSwitch> | ||||||
| 		</div> | 		</div> | ||||||
|  | 	</div> | ||||||
|  | 	<div class="_card _vMargin"> | ||||||
| 		<div class="_content"> | 		<div class="_content"> | ||||||
| 			<MkSelect v-model:value="lightTheme"> | 			<MkSelect v-model:value="lightTheme"> | ||||||
| 				<template #label>{{ $t('themeForLightMode') }}</template> | 				<template #label>{{ $t('themeForLightMode') }}</template> | ||||||
|  |  | ||||||
|  | @ -244,7 +244,7 @@ hr { | ||||||
| 	> ._title { | 	> ._title { | ||||||
| 		margin: 0; | 		margin: 0; | ||||||
| 		padding: 22px 32px; | 		padding: 22px 32px; | ||||||
| 		font-size: 1.1em; | 		font-size: 1em; | ||||||
| 		border-bottom: solid 1px var(--panelHeaderDivider); | 		border-bottom: solid 1px var(--panelHeaderDivider); | ||||||
| 		font-weight: bold; | 		font-weight: bold; | ||||||
| 		background: var(--panelHeaderBg); | 		background: var(--panelHeaderBg); | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue