feat: 新增「标签优先显示策略」设置(自动选择/Spark优先/APM优先,默认自动选择)

需求:在应用设置中新增标签优先显示策略配置,进入应用详情页时按所选策略决定
默认展示的来源(Spark/APM)标签;选中的标签即为安装时对应的来源。

实现:
- 新增 src/global/tagPriority.ts:策略('auto'|'spark'|'apm')共享模块,localStorage 持久化,
  通过共享 ref 在设置页与详情页间同步(纯前端显示偏好,不触及后端安装脚本)。
- SettingsModal.vue:在「安装设置」中新增三选项分段控件(默认选中「自动选择」),
  打开时加载、变更时即时保存。
- AppDetailModal.vue:新增 computeDefaultViewingOrigin,按策略计算默认 viewingOrigin:
  自动选择→getHybridDefaultOrigin(应用配置优先级);Spark/APM 优先→优先选中对应标签,
  若应用无该来源标签则回退优先级策略;仅有一个来源标签时默认展示该标签;
  父组件显式指定的 viewingOrigin 仍具最高优先级。

vue-tsc --noEmit 通过。
This commit is contained in:
xiyidaiwa
2026-08-07 10:45:44 +08:00
parent c1d2bef38a
commit 88499a56f8
3 changed files with 173 additions and 14 deletions
+72
View File
@@ -118,6 +118,51 @@
/>
</button>
</div>
<!-- 标签优先显示策略 -->
<div
class="rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-4 dark:border-slate-800/60 dark:bg-slate-800/50"
>
<div class="flex items-start gap-3">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
>
<i class="fas fa-tags"></i>
</div>
<div class="min-w-0 flex-1">
<p
class="text-sm font-medium text-slate-800 dark:text-slate-200"
>
标签优先显示策略
</p>
<p class="text-xs text-slate-500 dark:text-slate-400">
进入应用详情页时默认展示的来源标签
</p>
<div
class="mt-3 inline-flex w-full overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700"
role="radiogroup"
aria-label="标签优先显示策略"
>
<button
v-for="opt in strategyOptions"
:key="opt.value"
type="button"
role="radio"
:aria-checked="tagPriorityStrategy === opt.value"
class="flex-1 px-2 py-1.5 text-xs font-medium transition-colors"
:class="
tagPriorityStrategy === opt.value
? 'bg-brand text-white'
: 'bg-white text-slate-500 hover:bg-slate-100 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-slate-600'
"
@click="selectStrategy(opt.value)"
>
{{ opt.label }}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 底部提示 -->
@@ -135,6 +180,11 @@
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import {
getTagPriorityStrategy,
setTagPriorityStrategy,
type TagPriorityStrategy,
} from "../global/tagPriority";
const props = defineProps<{
show: boolean;
@@ -149,6 +199,26 @@ interface Settings {
enableCreateDesktop: boolean;
}
// 标签优先显示策略选项(默认选中「自动选择」)
const strategyOptions: Array<{ value: TagPriorityStrategy; label: string }> = [
{ value: "auto", label: "自动选择" },
{ value: "spark", label: "Spark 优先" },
{ value: "apm", label: "APM 优先" },
];
const tagPriorityStrategy = ref<TagPriorityStrategy>("auto");
// 加载标签优先显示策略(从持久化读取)
const loadTagPriority = () => {
tagPriorityStrategy.value = getTagPriorityStrategy();
};
// 选择并保存策略
const selectStrategy = (value: TagPriorityStrategy) => {
tagPriorityStrategy.value = value;
setTagPriorityStrategy(value);
};
const settings = ref<Settings>({
enableUpdateCheck: true,
enableCreateDesktop: true,
@@ -208,6 +278,7 @@ watch(
(newVal) => {
if (newVal) {
loadSettings();
loadTagPriority();
}
},
);
@@ -215,6 +286,7 @@ watch(
onMounted(() => {
if (props.show) {
loadSettings();
loadTagPriority();
}
});
</script>