feat: todo94

idea.md

@@ -91,7 +91,7 @@ dam4.png ---- 存档 59
 [] 勇士身上显示攻防血
 [] 优化地图拖动
 [] 楼层转换加入随机小贴士
-[] ui 中如果元素发生改变，那么做出背景亮一下再熄灭的效果
+[x] ui 中如果元素发生改变，那么做出背景亮一下再熄灭的效果
 [] 双击怪物手册拐点可以直接在拖动条上定位
 [] 重构技能树结构
 [] 技能树允许自动升级

src/panel/enemyCritical.vue

@@ -45,7 +45,9 @@
                         isMobile ? '' : '    '
                     }}</span
                 >
-                <span>{{ format(addAtk * ratio) }}</span>
+                <span class="changable" :change="addAtkChangable">{{
+                    format(addAtk * ratio)
+                }}</span>
             </div>
             <div>
                 <span
@@ -53,7 +55,9 @@
                         isMobile ? '' : '&nbsp;&nbsp;&nbsp;&nbsp;'
                     }}</span
                 >
-                <span>{{ format(addDef * ratio) }}</span>
+                <span class="changable" :change="addDefChangable">{{
+                    format(addDef * ratio)
+                }}</span>
             </div>
             <div>
                 <span
@@ -61,7 +65,7 @@
                         isMobile ? '' : '&nbsp;&nbsp;&nbsp;&nbsp;'
                     }}</span
                 >
-                <span
+                <span class="changable" :change="nowDamageChangable"
                     ><span style="font-family: 'Fira Code'">{{
                         (nowDamage[0] as number) < 0 && !has(enemy.damage)
                             ? '=>'
@@ -80,7 +84,9 @@
                         isMobile ? '' : '&nbsp;&nbsp;&nbsp;&nbsp;'
                     }}</span
                 >
-                <span>{{ format(nowDamage[1]) }}</span>
+                <span class="changable" :change="nowDamageChangable">{{
+                    format(nowDamage[1])
+                }}</span>
             </div>
         </div>
     </div>
@@ -93,6 +99,7 @@ import Chart, { ChartConfiguration } from 'chart.js/auto';
 import { has, setCanvasSize } from '../plugin/utils';
 import { debounce } from 'lodash-es';
 import { isMobile } from '../plugin/use';
+import { createChangable } from '@/plugin/ui/common';
 
 const props = defineProps<{
     fromBook?: boolean;
@@ -123,6 +130,8 @@ const allDef = ref(originDef);
 // 加攻加防数量
 const addAtk = ref(0);
 const addDef = ref(0);
+const addAtkChangable = createChangable(addAtk).change;
+const addDefChangable = createChangable(addDef).change;
 
 const originDamage = enemy.enemy.calDamage(core.status.hero).damage;
 
@@ -139,6 +148,7 @@ const nowDamage = computed(() => {
     if (!isFinite(originDamage)) return [-dam, dam];
     return [originDamage - dam, dam];
 });
+const nowDamageChangable = createChangable(nowDamage, 1).change;
 
 function generateChart(ele: HTMLCanvasElement, data: [number, number][]) {
     Chart.defaults.color = '#aaa';

src/plugin/ui/common.ts

@@ -0,0 +1,36 @@
+import { Ref, ref, watch } from 'vue';
+import { nextFrame } from '../utils';
+
+interface ChangableValue<T> {
+    change: Ref<boolean>;
+    value: Ref<T>;
+    stop: () => void;
+}
+
+/**
+ * 创建一个监听响应式变量更改的，可以用于Changable的监听器
+ * @param value 要监听的值
+ */
+export function createChangable<T>(
+    value: Ref<T>,
+    key?: keyof T
+): ChangableValue<T> {
+    const change = ref(false);
+    const stop = watch(value, (n, o) => {
+        if (key) {
+            if (n[key] === o[key]) return;
+        }
+        if (change.value) {
+            change.value = false;
+            nextFrame(() => (change.value = true));
+        } else {
+            change.value = true;
+        }
+    });
+
+    return {
+        change,
+        value,
+        stop
+    };
+}

src/ui/fly.vue

@@ -66,7 +66,12 @@
                         @click="changeFloorByDelta(-1)"
                         class="button-text"
                     />
-                    <span id="fly-now">{{ title }}</span>
+                    <span
+                        class="changable"
+                        id="fly-now"
+                        :change="titleChange"
+                        >{{ title }}</span
+                    >
                     <right-outlined
                         @click="changeFloorByDelta(1)"
                         class="button-text"
@@ -96,6 +101,7 @@ import { debounce } from 'lodash-es';
 import { downloadCanvasImage, tip } from '../plugin/utils';
 import { GameUi } from '@/core/main/custom/ui';
 import { gameKey } from '@/core/main/init/hotkey';
+import { createChangable } from '@/plugin/ui/common';
 
 const props = defineProps<{
     num: number;
@@ -158,6 +164,7 @@ function exit() {
 const title = computed(() => {
     return core.status.maps[nowFloor.value].title;
 });
+const titleChange = createChangable(title).change;
 
 /**
  * 绘制小地图