feat(NavTabs): 支持受控模式并改进可访问性

- 为 NavTabs 组件添加 `modelValue` 属性和 `update:modelValue`、`change` 事件，以支持 Vue 的双向绑定和受控模式
- 将导航项从 div 重构为 button 元素，并添加适当的 ARIA 角色和属性（role="tablist"、role="tab"、aria-selected、tabindex），提升可访问性
- 实现内部状态管理，当未提供 `modelValue` 时使用内部状态，并处理 items 变化时的状态重置
- 更新主页面的导航项数组格式以提高可读性

Author: Edsionss

src/components/ui/NavTabs/index.vue

@@ -1,24 +1,76 @@
 <template>
-  <nav class="ui-nav-tabs" :aria-label="props.ariaLabel">
-    <div
+  <nav class="ui-nav-tabs" :aria-label="props.ariaLabel" role="tablist">
+    <button
       v-for="item in props.items"
       :key="item.id"
+      type="button"
       class="ui-nav-tabs__item"
-      :class="{ 'ui-nav-tabs__item--active': item.active }">
-      <span class="ui-nav-tabs__icon material-symbols-outlined" :class="{ 'fill-1': item.active }">
+      role="tab"
+      :aria-selected="isActive(item)"
+      :tabindex="isActive(item) ? 0 : -1"
+      :class="{ 'ui-nav-tabs__item--active': isActive(item) }"
+      @click="handleItemClick(item.id)">
+      <span class="ui-nav-tabs__icon material-symbols-outlined" :class="{ 'fill-1': isActive(item) }">
         {{ item.icon }}
       </span>
       <span class="ui-nav-tabs__label">{{ item.label }}</span>
-    </div>
+    </button>
   </nav>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
 import type { NavTabsProps } from './types';
 
 const props = withDefaults(defineProps<NavTabsProps>(), {
   ariaLabel: 'Main navigation'
 });
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void;
+  (event: 'change', value: string): void;
+}>();
+
+const internalActiveId = ref(resolveInitialActiveId());
+const activeId = computed(() => props.modelValue ?? internalActiveId.value);
+
+watch(
+  () => props.modelValue,
+  nextValue => {
+    if (nextValue !== undefined) {
+      internalActiveId.value = nextValue;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.items,
+  items => {
+    if (!items.some(item => item.id === activeId.value)) {
+      internalActiveId.value = resolveInitialActiveId();
+    }
+  },
+  { deep: true }
+);
+
+function resolveInitialActiveId() {
+  const preferredItem = props.items.find(item => item.active) ?? props.items[0];
+  return preferredItem?.id ?? '';
+}
+
+function isActive(item: NavTabsProps['items'][number]) {
+  return activeId.value === item.id;
+}
+
+function handleItemClick(id: string) {
+  if (props.modelValue === undefined) {
+    internalActiveId.value = id;
+  }
+  emit('update:modelValue', id);
+  emit('change', id);
+}
 </script>
 
 <style scoped lang="css">
@@ -38,6 +90,9 @@ const props = withDefaults(defineProps<NavTabsProps>(), {
 }
 
 .ui-nav-tabs__item {
+  appearance: none;
+  background: transparent;
+  width: 100%;
   min-height: 56px;
   display: flex;
   flex-direction: column;
@@ -46,6 +101,10 @@ const props = withDefaults(defineProps<NavTabsProps>(), {
   gap: 3px;
   color: var(--ui-nav-tabs-text);
   border-bottom: 2px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  cursor: pointer;
 }
 
 .ui-nav-tabs__item--active {

src/components/ui/NavTabs/types.ts

@@ -7,5 +7,6 @@ export interface NavTabItem {
 
 export interface NavTabsProps {
   items: NavTabItem[];
+  modelValue?: string;
   ariaLabel?: string;
 }

src/pages/index.vue

@@ -171,9 +171,22 @@ const store = useAppStore();
 const { t } = useI18n();
 const appVersion = packageJson.version;
 const mainNavItems = computed(() => [
-  { id: 'monitor', label: t('overlay.mainNavMonitor'), icon: 'monitor_heart', active: true },
-  { id: 'toolkit', label: t('overlay.mainNavToolkit'), icon: 'construction' },
-  { id: 'settings', label: t('overlay.mainNavSettings'), icon: 'settings' }
+  {
+    id: 'monitor',
+    label: t('overlay.mainNavMonitor'),
+    icon: 'monitor_heart',
+    active: true
+  },
+  {
+    id: 'toolkit',
+    label: t('overlay.mainNavToolkit'),
+    icon: 'construction'
+  },
+  {
+    id: 'settings',
+    label: t('overlay.mainNavSettings'),
+    icon: 'settings'
+  }
 ]);
 const {
   updateAvailable,