Feat: 特定のサービスのアカウントの URL を ID から自動で設定する

[uni-kakurenbo]

User description

closes #333

やったこと

• FormInput に disabled プロパティ追加
• HomePage と Blog を除くサービスで， ID からアカウント URL を自動で生成・設定するように
  • 自動生成の対象となる場合，URL 欄が disable になる

やってないこと

• edit の API mock が壊れていそうで，正しく動作しない可能性があります．
• mixi2, bluesky が無いため type-check が落ちます．
  • bluesky の追加 #402, mixi2の追加 #459 をオンボーディングタスクに選んだ人が存在する可能性を考慮し，放置しています．

---

PR Type

Enhancement

---

Description

• サービス定義にtoUrl生成機能追加

• 新規/編集フォームでURL自動生成実装

• 対象サービス時にURL欄をdisabled化

• FormInputにdisabled属性追加

---

Changes diagram

flowchart LR
  A["サービス種別選択 (formValues.type)"] --> B{"toUrl関数有無"}
  B -- "Yes" --> C["generateUrlFromId適用\n(formValues.url設定)"]
  B -- "No" --> D["手動URL入力"]
  C --> E["URL欄をdisabled化"]
  D --> F["URL欄を有効化"]

Loading

---

Changes walkthrough 📝

Relevant files

Enhancement

FormInput.vue FormInputにdisabled機能追加                                                                      src/components/UI/FormInput.vue disabledプロパティ追加 デフォルト値false設定 <input>要素に:disabledバインド追加 +4/-1      UserAccountEdit.vue 編集フォームでURL自動生成設定                                                                                  src/pages/UserAccountEdit.vue generateUrlFromId/hasUrlGenerator導入 displayName算出用computed追加 watchでURL自動更新処理追加 URL入力欄に:disabled条件設定 +28/-5    UserAccountNew.vue 新規フォームでURL自動生成設定                                                                                  src/pages/UserAccountNew.vue generateUrlFromId/hasUrlGenerator導入 displayName算出用computed追加 watchでURL自動更新処理追加 URL入力欄に:disabled条件設定 +15/-4    services.ts サービス定義にURL自動生成設定追加                                                                              src/consts/services.ts Service型にtoUrlオプション追加 各サービスへtoUrl関数実装 hasUrlGenerator/generateUrlFromIdヘルパー追加 +33/-10

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	watchにdeepとimmediateを追加 初回レンダー時にURLを自動設定するため、watchにdeep: trueとimmediate: trueを追加し、型変更時に自動生成対象外のサービスではURLをクリアするロジックを入れましょう。 src/pages/UserAccountNew.vue [43-47] -watch(formValues, () => { - if (hasUrlGenerator(formValues.type)) { - formValues.url = generateUrlFromId(formValues.type, displayName.value) - } -}) +watch( + formValues, + () => { + if (hasUrlGenerator(formValues.type)) { + formValues.url = generateUrlFromId(formValues.type, displayName.value) + } else { + formValues.url = '' + } + }, + { deep: true, immediate: true } +) Suggestion importance[1-10]: 7 __ Why: The watch on formValues needs deep and immediate options to initialize the URL correctly and clearing it prevents stale values for non-generator services.	Medium
General	watchを配列依存に変更 深いオブジェクト全体ではなく、typeとdisplayNameだけをウォッチすると不要な再評価を減らせます。watch([..., ...], ...)形式に切り替えましょう。 src/pages/UserAccountEdit.vue [60-71] watch( - formValues, - () => { - if (hasUrlGenerator(formValues.value.type)) { - formValues.value.url = generateUrlFromId( - formValues.value.type, - displayName.value - ) + [() => formValues.value.type, displayName], + ([type, name]) => { + if (hasUrlGenerator(type)) { + formValues.value.url = generateUrlFromId(type, name) } }, - { deep: true, immediate: true } + { immediate: true } ) Suggestion importance[1-10]: 5 __ Why: Switching to watch specific dependencies reduces unnecessary evaluations without affecting functionality, a small performance optimization.	Low
	aria-disabled属性を追加 disabled時のアクセシビリティを向上させるために、aria-disabled属性もバインドすると良いでしょう。 src/components/UI/FormInput.vue [47-53] <input :class="$style.input" :placeholder="props.placeholder" :value="model" :disabled="props.disabled" + :aria-disabled="props.disabled" @input="handleInput" /> Suggestion importance[1-10]: 5 __ Why: Binding aria-disabled improves accessibility when disabled is applied, enhancing usability with minimal changes.	Low