重构: 前端Vue3+Tailwind+Vite构建管线+设置组件拆分

web-ui/src/settings/components/LayoutSection.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="mb-3">
+    <div class="text-[10px] font-semibold text-[var(--text-weak)] uppercase tracking-[1.5px] mb-1 pl-0.5">布局</div>
+    <div class="bg-[var(--card-bg)] border border-[var(--card-border)] rounded-lg">
+      <div class="flex justify-between items-center px-3.5 py-2">
+        <div class="text-xs font-medium text-[var(--text-muted)]">信息布局</div>
+        <select v-model="s.layout" @change="go.saveLayout(s.layout)"
+          class="bg-[var(--input-bg)] border border-[var(--input-border)] rounded-md text-[var(--text)] text-[11px] py-0.5 px-1.5 outline-none min-w-[80px] max-w-[160px] focus:border-[var(--input-border-focus)]">
+          <option value="single">合并卡片</option>
+          <option value="multi">独立卡片</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { go } from '../composables/useGoBridge'
+import type { SettingsData } from '@shared/types'
+defineProps<{ s: SettingsData }>()
+</script>