style: 全局 UI 主题皮肤重构与样式模块化

引入 Element Plus 主题定制和主题皮肤 composable，将全局
样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等），
统一色彩变量和间距规范，重构所有视图和组件样式以适配新
主题系统，优化图表和知识图谱组件视觉表现，提取审计和差
旅报销相关子组件。

web/src/views/SettingsView.vue

@@ -101,7 +101,54 @@
             </section>
           </template>
 
-          <template v-else-if="activeSection === 'admin'">
+          <template v-else-if="activeSection === 'appearance'">
+            <section class="settings-card">
+              <div class="card-head">
+                <div class="card-title-with-icon">
+                  <div class="model-icon-box slate">
+                    <i class="mdi mdi-palette-outline"></i>
+                  </div>
+                  <div>
+                    <h4>界面皮肤与企业主色</h4>
+                    <p>只调整整体主色、焦点态、按钮和 Element Plus 控件颜色，不改变业务布局。</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="skin-option-grid">
+                <button
+                  v-for="skin in themeSkinOptions"
+                  :key="skin.id"
+                  class="skin-option"
+                  :class="{ active: activeThemeSkinId === skin.id }"
+                  type="button"
+                  @click="selectThemeSkin(skin.id)"
+                >
+                  <span class="skin-swatch" aria-hidden="true">
+                    <i :style="{ background: skin.primary }"></i>
+                    <i :style="{ background: skin.primarySoftStrong }"></i>
+                    <i :style="{ background: skin.secondary }"></i>
+                    <i :style="{ background: skin.chartAmber }"></i>
+                  </span>
+                  <span class="skin-copy">
+                    <strong>{{ skin.label }}</strong>
+                    <small>{{ skin.desc }}</small>
+                  </span>
+                  <span v-if="activeThemeSkinId === skin.id" class="skin-current">当前</span>
+                </button>
+              </div>
+
+              <div class="skin-preview-panel">
+                <div>
+                  <strong>{{ activeThemeSkin.label }}</strong>
+                  <span>当前主色会同步到全局按钮、焦点环、下拉浮层和表单控件。</span>
+                </div>
+                <button class="skin-preview-action" type="button">主按钮</button>
+              </div>
+            </section>
+          </template>
+
+          <template v-else-if="activeSection === 'admin'">
             <section class="settings-card">
               <div class="card-head">
                 <div class="card-title-with-icon">
@@ -365,14 +412,14 @@
                   <input v-model.number="pageState.logForm.retentionDays" type="number" min="7" />
                 </label>
 
-                <label class="field">
-                  <span>归档周期</span>
-                  <select v-model="pageState.logForm.archiveCycle">
-                    <option value="daily">按天归档</option>
-                    <option value="weekly">按周归档</option>
-                    <option value="monthly">按月归档</option>
-                  </select>
-                </label>
+                <label class="field">
+                  <span>归档周期</span>
+                  <EnterpriseSelect
+                    v-model="pageState.logForm.archiveCycle"
+                    :options="archiveCycleOptions"
+                    placeholder="选择归档周期"
+                  />
+                </label>
 
                 <label class="field field-full">
                   <span><em>*</em> 日志路径</span>