複製アクションの ⋯ プルダウン集約
詳細ヘッダに操作ボタンが増えていくのを抑えるため、二次的・破壊的な操作(複製・削除)を ケバブ(⋯)メニューへ集約する。主要導線はボタンのまま残す。
01 背景と目的
「メッセージの複製」「リッチメニューの複製」に続き、流入経路(Landing)と アンケート(QuestionSet)にも複製機能を追加した。しかし詳細ヘッダに 複製ボタンを単純追加すると、既存の保存/編集/削除などと並んでボタンが増え続け、 ヘッダが手狭になる。
- 目的: ヘッダの表示ボタン数を増やさずに複製導線を提供する。
- 方針: 今後もアクションは「⋯ プルダウンへ寄せる」ことを既定とし、UI の一貫性を保つ。
- 非目的: 複製・削除のロジックやバックエンド仕様の変更。UI 表現のみを対象とする。
02 対象画面
| 画面 | ファイル | ヘッダ位置 |
|---|---|---|
| 流入経路 詳細 | pages/actions/index.vue | HalfModal のヘッダ(保存/編集の右) |
| アンケート 詳細 | pages/questions.vue | 詳細ヘッダ(route questions-id、右端) |
03 Before / After
Before
編集
複製
削除
操作ごとにボタンが並び、増えるほどヘッダが圧迫される。
After
編集
⋯
主要導線はボタン、複製・削除は ⋯ メニューへ集約。
04 メニュー仕様
- トリガー:
mdi-dots-horizontal(⋯)のアイコンボタン。v-menuをoffset-yで下方向に開く。 - 項目順: 複製 → 削除。削除は破壊的操作のため末尾に置く。
- 複製: クリックで即実行(確認ダイアログなし)。完了後は一覧を再読込し、成功トーストを表示。
- 削除: 既存の確認ダイアログ(
deleteDialog/deleteConfirmModal)をそのまま呼ぶ。挙動は変更しない。 - 残すボタン: 流入経路は「保存/編集」、アンケートは「内容編集/シナリオ設定」を主要導線としてボタンのまま維持する。
!
複製フラグが無効なときの見え方
複製項目はフラグで v-if 制御する(下記)。無効時はメニュー内に
削除だけが残る(メニュー自体は表示される)。単独項目になる点は許容とする。
05 表示条件とフラグ
複製項目は account の extension フラグで出し分ける。判定は既存の
enable_copy_message と同形の computed(canCopyXxx)で行い、項目に v-if を付ける。
| 対象 | extension identifier | computed | 無効時 |
|---|---|---|---|
| 流入経路の複製 | enable_copy_landing | canCopyLanding | 複製項目を非表示 |
| アンケートの複製 | enable_copy_question_set | canCopyQuestionSet | 複製項目を非表示 |
両フラグは pages/settings/extensions.vue の一覧にも登録済み
(流入経路の複製=分析カテゴリ、アンケートの複製=アンケートカテゴリ)。
06 実装メモ
- Mutation:
copyLanding/copyQuestionSet。input は{ accountId, id, name? }、返却はLandingType/QuestionSetType(workflow-engine-api)。 - name: 任意引数。現状はクライアントから送らず、サーバの複製サービス既定命名に委ねる。
- gql:
apollo/mutations/copyLanding.gql/apollo/mutations/copyQuestionSet.gql。 - アンケート一覧(
pages/questions/index.vue)の行メニューは意図的に非表示のため、そこには複製導線を足していない。
07 更新履歴
-
v0.2
2026-07-31
⋯ メニューへ集約
独立していた複製・削除ボタンを、詳細ヘッダの ⋯ プルダウンへ統合。複製項目はフラグで
v-if制御。 -
v0.1
2026-07-31
初版
複製ボタンを削除ボタンの隣に独立配置。
enable_copy_landing/enable_copy_question_setで表示ゲート。