refactor(styles): 建立统一的生产级样式体系 (#4)

## 变更内容

- 将全局样式拆分为设计令牌、基础规则和语义组件层
- 集中管理 Naive UI 主题配置
- 迁移页面容器、表单、信息面板和按钮等重复样式
- 增加样式体系文档与自动契约检查

## 验证

- `npm run check:styles`
- `npm run build`Reviewed-on: #4

src/views/gallery/GalleryView.vue

@@ -341,17 +341,17 @@ onUnmounted(() => {
 
 <template>
   <div>
-    <section class="border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]">
-      <div class="max-w-7xl mx-auto px-4 py-10">
-        <p class="text-sm font-medium uppercase tracking-[0.24em] text-sky-700">Community Gallery</p>
-        <h1 class="mt-3 text-4xl font-bold text-slate-900">云图画廊</h1>
-        <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
+    <section class="oc-page-hero">
+      <div class="oc-container oc-container--wide oc-page-hero__inner">
+        <p class="oc-page-eyebrow">Community Gallery</p>
+        <h1 class="oc-page-title">云图画廊</h1>
+        <p class="oc-page-description">
           按上传时间倒序浏览社区云图。瀑布流会尽量保留图片原始比例，悬停即可快速查看基本信息，点开可看大图和详细记录。
         </p>
       </div>
     </section>
 
-    <div class="max-w-7xl mx-auto px-4 py-8">
+    <div class="oc-container oc-container--wide oc-page-content">
       <section>
         <div class="mb-4 border border-slate-200 bg-white p-3 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)]">
           <div class="flex items-center gap-3">
@@ -534,20 +534,20 @@ onUnmounted(() => {
         @close="closeDetail"
       >
         <div class="grid gap-4 sm:grid-cols-2">
-          <div class="border border-slate-200 bg-slate-50 p-4">
-            <p class="text-xs uppercase tracking-[0.18em] text-slate-500">上传时间</p>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">上传时间</p>
             <p class="mt-2 text-sm font-medium text-slate-900">{{ formatUploadTime(selectedCloud) }}</p>
           </div>
-          <div class="border border-slate-200 bg-slate-50 p-4">
-            <p class="text-xs uppercase tracking-[0.18em] text-slate-500">拍摄时间</p>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">拍摄时间</p>
             <p class="mt-2 text-sm font-medium text-slate-900">{{ formatCapturedTime(selectedCloud) }}</p>
           </div>
-          <div class="border border-slate-200 bg-slate-50 p-4">
-            <p class="text-xs uppercase tracking-[0.18em] text-slate-500">位置</p>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">位置</p>
             <p class="mt-2 text-sm font-medium text-slate-900">{{ selectedCloud.location_name || '未填写位置名称' }}</p>
           </div>
-          <div class="border border-slate-200 bg-slate-50 p-4">
-            <p class="text-xs uppercase tracking-[0.18em] text-slate-500">模糊化经纬度</p>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">模糊化经纬度</p>
             <p class="mt-2 text-sm font-medium text-slate-900">
               纬度 {{ formatCoordinate(selectedCloud.latitude) }} / 经度 {{ formatCoordinate(selectedCloud.longitude) }}
             </p>
@@ -555,7 +555,7 @@ onUnmounted(() => {
         </div>
 
         <div class="mt-5 border border-slate-200 bg-white p-5">
-          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">图片说明</p>
+          <p class="oc-section-label">图片说明</p>
           <p class="mt-3 text-sm leading-7 text-slate-700">
             {{ selectedCloud.description || '上传者没有留下额外说明。' }}
           </p>