发布 0.1.0:通知渠道、告警规则与多项体验修复

2026-07-10 17:31:19 +08:00
parent 9d0c116ce3
commit 5464d2dfea
68 changed files with 1604 additions and 359 deletions
@@ -1,30 +1,98 @@
 <script setup lang="ts">
-// 项目 logo:星爆贴纸(波普风,十二角星爆 + O!)。
-// 固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
+// 项目 logo:波普贴纸,双款式跟随 app store(burst 星爆 / seal 波浪封印,
+// 设置 · 关于点击 logo 切换)。固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
+import { computed } from 'vue'
+
+import { useAppStore } from '@/stores/app'
+
 withDefaults(defineProps<{ size?: number }>(), { size: 48 })

 const BURST =
  'M24 5 L27.9 9.5 L33.5 7.5 L34.6 13.4 L40.5 14.5 L38.5 20.1 L43 24 L38.5 27.9 ' +
  'L40.5 33.5 L34.6 34.6 L33.5 40.5 L27.9 38.5 L24 43 L20.1 38.5 L14.5 40.5 L13.4 34.6 ' +
  'L7.5 33.5 L9.5 27.9 L5 24 L9.5 20.1 L7.5 14.5 L13.4 13.4 L14.5 7.5 L20.1 9.5 Z'
+// 十二瓣扇贝圆(经典价签贴纸),内圈虚线封印
+const SEAL =
+  'M39.5 19.9 A5.8 5.8 0 0 0 35.3 12.7 A5.8 5.8 0 0 0 28.1 8.5 A5.8 5.8 0 0 0 19.9 8.5 ' +
+  'A5.8 5.8 0 0 0 12.7 12.7 A5.8 5.8 0 0 0 8.5 19.9 A5.8 5.8 0 0 0 8.5 28.1 ' +
+  'A5.8 5.8 0 0 0 12.7 35.3 A5.8 5.8 0 0 0 19.9 39.5 A5.8 5.8 0 0 0 28.1 39.5 ' +
+  'A5.8 5.8 0 0 0 35.3 35.3 A5.8 5.8 0 0 0 39.5 28.1 A5.8 5.8 0 0 0 39.5 19.9 Z'
+
+const VARIANTS = {
+  burst: { d: BURST, strokeWidth: 2.6, textY: 28.8, fontSize: 13, ring: false },
+  seal: { d: SEAL, strokeWidth: 2.4, textY: 28.6, fontSize: 12.5, ring: true },
+} as const
+
+const app = useAppStore()
+const v = computed(() => VARIANTS[app.logoVariant])
 </script>

 <template>
-  <svg :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
-    <g transform="rotate(-8 24 24)">
-      <path :d="BURST" fill="#3A2418" transform="translate(1.9,2.4)"></path>
-      <path :d="BURST" fill="#C96442" stroke="#FFFDF7" stroke-width="2.6" stroke-linejoin="round"></path>
-      <text
-        x="24"
-        y="28.8"
-        text-anchor="middle"
-        font-family="Georgia,'Times New Roman',serif"
-        font-size="13"
-        font-weight="900"
-        fill="#FAF3E3"
-      >
-        O!
-      </text>
-    </g>
-  </svg>
+  <span class="logo-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
+    <Transition name="logo-slide">
+      <svg :key="app.logoVariant" :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
+        <g transform="rotate(-8 24 24)">
+          <path :d="v.d" fill="#3A2418" transform="translate(1.9,2.4)"></path>
+          <path :d="v.d" fill="#C96442" stroke="#FFFDF7" :stroke-width="v.strokeWidth" stroke-linejoin="round"></path>
+          <circle
+            v-if="v.ring"
+            cx="24"
+            cy="24"
+            r="12.5"
+            fill="none"
+            stroke="#FAF3E3"
+            stroke-width="1"
+            stroke-dasharray="2.4 2.6"
+            opacity="0.7"
+          ></circle>
+          <text
+            x="24"
+            :y="v.textY"
+            text-anchor="middle"
+            font-family="Georgia,'Times New Roman',serif"
+            :font-size="v.fontSize"
+            font-weight="900"
+            fill="#FAF3E3"
+          >
+            O!
+          </text>
+        </g>
+      </svg>
+    </Transition>
+  </span>
 </template>
+
+<style scoped>
+/* 款式切换:旧款右滑淡出、新款自左滑入(整体从左到右);
+   离开元素绝对定位避免过渡期双元素撑开布局 */
+.logo-wrap {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+}
+.logo-slide-enter-active,
+.logo-slide-leave-active {
+  transition:
+    transform 0.35s ease,
+    opacity 0.35s ease;
+}
+.logo-slide-leave-active {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.logo-slide-enter-from {
+  transform: translateX(-45%);
+  opacity: 0;
+}
+.logo-slide-leave-to {
+  transform: translateX(45%);
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .logo-slide-enter-active,
+  .logo-slide-leave-active {
+    transition: none;
+  }
+}
+</style>