super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化布局

Browse Source
This commit is contained in:
supernijia
2026-07-24 13:26:37 +08:00
parent bca1335dc6
commit f1b7a7aae8
8 changed files with 192 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-vue/src/shared/components/ZiniaoVersionSetting.vue
+6 -9
View File
@@ -1,13 +1,12 @@
<template>
<section class="ziniao-version-setting">
<div class="setting-title">紫鸟版本</div>
<div class="version-options" role="radiogroup" aria-label="紫鸟版本">
<label v-for="option in options" :key="option.value" class="version-option"
:class="{ active: modelValue === option.value }">
<input :checked="modelValue === option.value" type="radio" :name="radioName" :value="option.value"
@change="emit('update:modelValue', option.value)" />
<div class="version-options" role="group" aria-label="紫鸟版本">
<button v-for="option in options" :key="option.value" type="button" class="version-option"
:class="{ active: modelValue === option.value }" :aria-pressed="modelValue === option.value"
@mousedown.prevent @click="emit('update:modelValue', option.value)">
<span>{{ option.label }}</span>
</label>
</button>
</div>
</section>
</template>
@@ -17,7 +16,6 @@ import type { ZiniaoVersion } from '@/shared/utils/ziniao-version'
defineProps<{ modelValue: ZiniaoVersion }>()
const emit = defineEmits<{ 'update:modelValue': [value: ZiniaoVersion] }>()
const radioName = `ziniao-version-${Math.random().toString(36).slice(2)}`
const options: Array<{ label: string; value: ZiniaoVersion }> = [
{ label: '新版', value: 'new' },
{ label: '旧版', value: 'old' },
@@ -28,8 +26,7 @@ const options: Array<{ label: string; value: ZiniaoVersion }> = [
.ziniao-version-setting { margin: 16px 0; }
.setting-title { margin-bottom: 10px; color: #bbb; font-size: 13px; }
.version-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-height: 40px; padding: 3px; border: 1px solid #3a3a3a; border-radius: 6px; background: #202020; }
.version-option { display: flex; min-width: 0; align-items: center; justify-content: center; border-radius: 4px; color: #aaa; cursor: pointer; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
.version-option { display: flex; min-width: 0; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: #aaa; cursor: pointer; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
.version-option:hover { color: #eee; }
.version-option.active { background: #409eff; color: #fff; }
.version-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
</style>