feat(frontend): 設定の検索 (#15505)
* wip * wip * wip * test * wip rollup pluginでsearchIndexの情報生成 * wip * SPDX * wip: markerIdを自動付与 * rollupでビルド時・devモード時に毎回uuidを生成するように * 開発サーバーでだけ必要な挙動は開発サーバーのみで * 条件が逆 * wip: childrenの生成 * update comment * update comment * rename auto generated file * hashをパスと行数から決定 * Update privacy.vue * Update privacy.vue * wip * Update general.vue * Update general.vue * wip * wip * Update SearchMarker.vue * wip * Update profile.vue * Update mute-block.vue * Update mute-block.vue * Update general.vue * Update general.vue * childrenがduplicate key errorを吐く問題をいったん解決 * マーカーの形を成形 * loggerを置きかえ * とりあえず省略記法に対応 * Refactor and Format codes * wip * Update settings-search-index.ts * wip * wip * とりあえず不確定要因の仮置きidを削除 * hashの生成を正規化（絶対パスになっていたのを緩和） * pathの入力を省略可能に * adminでもパス生成できるように * Update settings-search-index.ts * Update privacy.vue * wip * build searchIndex * wip * build * Update general.vue * build * Update sounds.vue * build * build * Update sounds.vue * 🎨 * 🎨 * Update privacy.vue * Update privacy.vue * Update security.vue * create-search-indexを多少改善 * build * Update 2fa.vue * wip * 必ずtransformCodeCacheを利用するように, キャッシュの明確な受け渡しを定義 * キャッシュはdevServerでなくても更新 * Revert "wip" This reverts commit 41bffd3a13f55618bf939dc1c9acb2a77ead4054. * inlining * wip * Update theme.vue * 🎨 * wip normalize * Update theme.vue * キャッシュのパス変換 * build * wip * wip * Update SearchMarker.vue * i18n.ts['key'] の形式が取り出せない問題のFix * build * 仮でpath入れ * 必ず絶対パスが使われるように * wip * 🎨 * storybookビルド時はcreateSearchIndexをしない * inliningの構造化 * format code * Update index.vue * wip * wip * 🎨 * wip * wip * wip * wip * wip * wip * wip * wip * clean up * Update navbar.vue * enhance: 検索で上下矢印を使用することで検索結果を移動できるように * refactor * fix(frontend): PageWindowでSearchMarkerが動作するように * enhance(frontend): SearchMarkerの点滅を一定時間で止める * lint fix * fix: 子要素監視が抜けていたのを修正 * アニメーションの回数はCSSで制御するように * refactor * enhance(frontend): 検索インデックス作成時のログを削減 * revert * fix * fix --------- Co-authored-by: tai-cha <dev@taichan.site> Co-authored-by: taichan <40626578+tai-cha@users.noreply.github.com> Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
syuilo
GitHub
parent
46067f6e17
commit
0214a0001f
36 changed files with 4706 additions and 1402 deletions
14
packages/frontend/src/components/global/SearchKeyword.vue
Normal file
14
packages/frontend/src/components/global/SearchKeyword.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
</style>
|
||||
14
packages/frontend/src/components/global/SearchLabel.vue
Normal file
14
packages/frontend/src/components/global/SearchLabel.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
</style>
|
||||
116
packages/frontend/src/components/global/SearchMarker.vue
Normal file
116
packages/frontend/src/components/global/SearchMarker.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="root" :class="[$style.root, { [$style.highlighted]: highlighted }]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
computed,
|
||||
ref,
|
||||
useTemplateRef,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
markerId?: string;
|
||||
label?: string;
|
||||
icon?: string;
|
||||
keywords?: string[];
|
||||
children?: string[];
|
||||
inlining?: string[];
|
||||
}>();
|
||||
|
||||
const rootEl = useTemplateRef('root');
|
||||
const rootElMutationObserver = new MutationObserver(() => {
|
||||
checkChildren();
|
||||
});
|
||||
const injectedSearchMarkerId = inject<Ref<string | null>>('inAppSearchMarkerId');
|
||||
const searchMarkerId = computed(() => injectedSearchMarkerId?.value ?? window.location.hash.slice(1));
|
||||
const highlighted = ref(props.markerId === searchMarkerId.value);
|
||||
|
||||
function checkChildren() {
|
||||
if (props.children?.includes(searchMarkerId.value)) {
|
||||
const el = document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
|
||||
highlighted.value = el == null;
|
||||
}
|
||||
}
|
||||
|
||||
watch([
|
||||
searchMarkerId,
|
||||
() => props.children,
|
||||
], () => {
|
||||
if (props.children != null && props.children.length > 0) {
|
||||
checkChildren();
|
||||
}
|
||||
}, { flush: 'post' });
|
||||
|
||||
function init() {
|
||||
checkChildren();
|
||||
|
||||
if (highlighted.value) {
|
||||
rootEl.value?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
}
|
||||
|
||||
if (rootEl.value != null) {
|
||||
rootElMutationObserver.observe(rootEl.value, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
rootElMutationObserver.disconnect();
|
||||
}
|
||||
|
||||
onMounted(init);
|
||||
onActivated(init);
|
||||
onDeactivated(dispose);
|
||||
onBeforeUnmount(dispose);
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
width: calc(100% + 16px);
|
||||
height: calc(100% + 16px);
|
||||
border-radius: 6px;
|
||||
animation: blink 1s 3.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
background: color(from var(--MI_THEME-accent) srgb r g b / 0.05);
|
||||
border: 1px solid color(from var(--MI_THEME-accent) srgb r g b / 0.7);
|
||||
}
|
||||
50% {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue