From b10074e939d22f7aae41137ddf6f0c8fd7bdd7b1 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Wed, 17 Dec 2025 12:27:55 +0900 Subject: [PATCH] enhance(frontend): add deck tour --- CHANGELOG.md | 1 + locales/ja-JP.yml | 9 ++++++ packages/frontend/src/tips.ts | 1 + packages/frontend/src/ui/deck.vue | 48 ++++++++++++++++++++++++----- packages/i18n/src/autogen/locale.ts | 30 ++++++++++++++++++ 5 files changed, 82 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17aff08eab..5800477c42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ v2025.12.0で行われた「configの`trustProxy`のデフォルト値を`false` - 依存関係の更新 ### Client +- Enhance: デッキのUI説明を追加 - Fix: バージョン表記のないPlayが正しく動作しない問題を修正 バージョン表記のないものは v0.x 系として実行されます。v1.x 系で動作させたい場合は必ずバージョン表記を含めてください。 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 8e4a52b68d..643095bc52 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2890,6 +2890,15 @@ _deck: usedAsMinWidthWhenFlexible: "「幅を自動調整」が有効の場合、これが幅の最小値となります" flexible: "幅を自動調整" enableSyncBetweenDevicesForProfiles: "プロファイル情報のデバイス間同期を有効にする" + showHowToUse: "UIの説明を見る" + + _howToUse: + addColumn_title: "カラム追加" + addColumn_description: "カラムの種類を選んで追加できます。" + settings_title: "UI設定" + settings_description: "デッキUIの詳細設定を行えます。" + switchProfile_title: "プロファイル切り替え" + switchProfile_description: "UIのレイアウトをプロファイルとして保存し、いつでも切り替えられるようにできます。" _columns: main: "メイン" diff --git a/packages/frontend/src/tips.ts b/packages/frontend/src/tips.ts index 8a58e2aa63..6ee7130ee9 100644 --- a/packages/frontend/src/tips.ts +++ b/packages/frontend/src/tips.ts @@ -12,6 +12,7 @@ export const TIPS = [ 'clips', 'userLists', 'postForm', + 'deck', 'tl.home', 'tl.local', 'tl.social', diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 0941c25467..1a2a1fd99a 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -38,36 +38,39 @@ SPDX-License-Identifier: AGPL-3.0-only @headerWheel="onWheel" /> -
+
{{ i18n.ts._deck.introduction }}
{{ i18n.ts._deck.introduction2 }}
+ + +
- +
- +
- +
- +
- +
- +
@@ -96,6 +99,7 @@ import { $i } from '@/i.js'; import { i18n } from '@/i18n.js'; import { deviceKind } from '@/utility/device-kind.js'; import { prefer } from '@/preferences.js'; +import { store } from '@/store.js'; import XMainColumn from '@/ui/deck/main-column.vue'; import XTlColumn from '@/ui/deck/tl-column.vue'; import XAntennaColumn from '@/ui/deck/antenna-column.vue'; @@ -107,10 +111,13 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue'; import XDirectColumn from '@/ui/deck/direct-column.vue'; import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue'; import XChatColumn from '@/ui/deck/chat-column.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { mainRouter } from '@/router.js'; import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js'; import { shouldSuggestRestoreBackup } from '@/preferences/utility.js'; import { shouldSuggestReload } from '@/utility/reload-suggest.js'; +import { startTour } from '@/utility/tour.js'; +import { closeTip } from '@/tips.js'; const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue')); @@ -163,6 +170,9 @@ function showSettings() { } const columnsEl = useTemplateRef('columnsEl'); +const addColumnButtonEl = useTemplateRef('addColumnButtonEl'); +const settingsButtonEl = useTemplateRef('settingsButtonEl'); +const swicthProfileButtonEl = useTemplateRef('swicthProfileButtonEl'); const addColumn = async (ev) => { const { canceled, result: column } = await os.select({ @@ -218,6 +228,30 @@ async function deleteProfile() { os.success(); } +function showTour() { + if (addColumnButtonEl.value == null || + settingsButtonEl.value == null || + swicthProfileButtonEl.value == null) { + return; + } + + startTour([{ + element: addColumnButtonEl.value, + title: i18n.ts._deck._howToUse.addColumn_title, + description: i18n.ts._deck._howToUse.addColumn_description, + }, { + element: settingsButtonEl.value, + title: i18n.ts._deck._howToUse.settings_title, + description: i18n.ts._deck._howToUse.settings_description, + }, { + element: swicthProfileButtonEl.value, + title: i18n.ts._deck._howToUse.switchProfile_title, + description: i18n.ts._deck._howToUse.switchProfile_description, + }]).then(() => { + closeTip('deck'); + }); +} + window.document.documentElement.style.overflowY = 'hidden'; window.document.documentElement.style.scrollBehavior = 'auto'; diff --git a/packages/i18n/src/autogen/locale.ts b/packages/i18n/src/autogen/locale.ts index 8f94aab555..55833b0cfc 100644 --- a/packages/i18n/src/autogen/locale.ts +++ b/packages/i18n/src/autogen/locale.ts @@ -10936,6 +10936,36 @@ export interface Locale extends ILocale { * プロファイル情報のデバイス間同期を有効にする */ "enableSyncBetweenDevicesForProfiles": string; + /** + * UIの説明を見る + */ + "showHowToUse": string; + "_howToUse": { + /** + * カラム追加 + */ + "addColumn_title": string; + /** + * カラムの種類を選んで追加できます。 + */ + "addColumn_description": string; + /** + * UI設定 + */ + "settings_title": string; + /** + * デッキUIの詳細設定を行えます。 + */ + "settings_description": string; + /** + * プロファイル切り替え + */ + "switchProfile_title": string; + /** + * UIのレイアウトをプロファイルとして保存し、いつでも切り替えられるようにできます。 + */ + "switchProfile_description": string; + }; "_columns": { /** * メイン