fix: 修复重命名可以移动文件的问题

Author: vikiboss

src/css/components.css

@@ -120,6 +120,20 @@
       }
     }
 
+    & .field-error {
+      font-size: var(--text-xs);
+      color: var(--text-danger);
+      margin: 0;
+    }
+
+    & input:has(~ .field-error:not([hidden])) {
+      border-color: var(--text-danger);
+
+      &:focus {
+        border-color: var(--text-danger);
+      }
+    }
+
     &:not(:last-child) {
       margin-bottom: var(--sp-3);
     }

src/index.html

@@ -1145,6 +1145,7 @@ <h2 id="prompt-title">提示</h2>
           <div class="field">
             <label for="prompt-input" id="prompt-label">值</label>
             <input id="prompt-input" type="text" required autocomplete="off" />
+            <p id="prompt-error" class="field-error" hidden></p>
           </div>
         </div>
         <div class="dialog-footer">

src/js/file-operations.js

@@ -27,7 +27,13 @@ class FileOperations {
   /** @param {string} key @param {boolean} isFolder */
   async rename(key, isFolder) {
     const oldName = getFileName(key)
-    const newName = await this.#ui.prompt(t('renameTitle'), t('renameLabel'), oldName)
+    const newName = await this.#ui.prompt(t('renameTitle'), t('renameLabel'), oldName, {
+      validate: v => {
+        const illegal = v.match(/[/\\:*?"<>|\x00-\x1F]/g)
+        if (illegal) return t('renameInvalidChars', { chars: [...new Set(illegal)].join('  ') })
+        return null
+      },
+    })
     if (!newName || newName === oldName) return
 
     try {

src/js/i18n.js

@@ -57,6 +57,7 @@ const I18N = {
     deleteFolderConfirmMsg: '确定要删除目录 "{name}" 及其所有内容吗？删除后无法恢复哦。',
     renameTitle: '重命名',
     renameLabel: '新名称',
+    renameInvalidChars: '文件名包含非法字符：{chars}',
     copyTitle: '复制到',
     copyLabel: '目标路径',
     moveTitle: '移动到',
@@ -263,6 +264,7 @@ const I18N = {
     deleteFolderConfirmMsg: '确定要删除目录 "{name}" 及其所有内容吗？删除后无法恢复哦。',
     renameTitle: '重命名',
     renameLabel: '新名称',
+    renameInvalidChars: '文件名包含非法字符：{chars}',
     copyTitle: '复制到',
     copyLabel: '目标路径',
     moveTitle: '移动到',
@@ -473,6 +475,7 @@ const I18N = {
     deleteFolderConfirmMsg: 'Delete folder "{name}" and everything inside? This can\'t be undone.',
     renameTitle: 'Rename',
     renameLabel: 'New name',
+    renameInvalidChars: 'File name contains illegal characters: {chars}',
     copyTitle: 'Copy to',
     copyLabel: 'Destination path',
     moveTitle: 'Move to',
@@ -690,6 +693,7 @@ const I18N = {
     deleteFolderConfirmMsg: 'フォルダ "{name}" とその中身をすべて削除しますか？元に戻せません。',
     renameTitle: '名前変更',
     renameLabel: '新しい名前',
+    renameInvalidChars: 'ファイル名に使用できない文字が含まれています：{chars}',
     copyTitle: 'コピー先',
     copyLabel: 'コピー先パス',
     moveTitle: '移動先',

src/js/ui-manager.js

@@ -205,22 +205,43 @@ class UIManager {
     }
   }
 
-  /** @param {string} title @param {string} label @param {string} [defaultValue] @returns {Promise<string | null>} */
-  prompt(title, label, defaultValue = '') {
+  /**
+   * @param {string} title
+   * @param {string} label
+   * @param {string} [defaultValue]
+   * @param {{ validate?: (v: string) => string | null }} [options]
+   * @returns {Promise<string | null>}
+   */
+  prompt(title, label, defaultValue = '', { validate } = {}) {
     return new Promise(resolve => {
       const dialog = /** @type {HTMLDialogElement} */ ($('#prompt-dialog'))
       const form = $('#prompt-form')
       const input = /** @type {HTMLInputElement} */ ($('#prompt-input'))
+      const errorEl = $('#prompt-error')
       $('#prompt-title').textContent = title
       $('#prompt-label').textContent = label
       input.value = defaultValue
+      errorEl.textContent = ''
+      errorEl.hidden = true
 
       /** @type {string | null} */
       let result = null
 
+      /** @returns {boolean} */
+      const checkValid = () => {
+        if (!validate) return true
+        const err = validate(input.value)
+        errorEl.textContent = err ?? ''
+        errorEl.hidden = !err
+        return !err
+      }
+
+      const onInput = () => checkValid()
+
       /** @param {Event} e */
       const onSubmit = e => {
         e.preventDefault()
+        if (!checkValid()) { input.focus(); return }
         result = input.value.trim() || null
         dialog.close()
       }
@@ -234,12 +255,14 @@ class UIManager {
 
       const onClose = () => {
         form.removeEventListener('submit', onSubmit)
+        input.removeEventListener('input', onInput)
         $('#prompt-cancel').removeEventListener('click', onCancel)
         dialog.removeEventListener('click', onBackdropClick)
         resolve(result)
       }
 
       form.addEventListener('submit', onSubmit)
+      input.addEventListener('input', onInput)
       $('#prompt-cancel').addEventListener('click', onCancel)
       dialog.addEventListener('click', onBackdropClick)
       dialog.addEventListener('close', onClose, { once: true })