等待后端更新接口

public/js/region-pages.js

@@ -107,6 +107,10 @@
     return true;
   }
 
+  function isForbidden(error) {
+    return Number(error && (error.status || error.code)) === 403;
+  }
+
   function query(selector, rootNode) {
     if (!documentRef && !rootNode) return null;
     return (rootNode || documentRef).querySelector(selector);
@@ -136,6 +140,21 @@
     return values;
   }
 
+  function setApiState(target, type, message) {
+    if (!target) return;
+    if (type && root.ProfileUI && root.ProfileUI.setApiState) {
+      root.ProfileUI.setApiState(target, type, message);
+      return;
+    }
+    target.textContent = message || '';
+  }
+
+  function setPickerState(picker, type, message) {
+    var status = picker && query('[data-region-picker-status]', picker.parentNode);
+
+    setApiState(status, type, message);
+  }
+
   function setOptions(select, items, placeholder) {
     var list = normalizeList(items);
 
@@ -186,10 +205,14 @@
     }
   }
 
-  function handlePickerError(error) {
+  function handlePickerError(picker, error) {
     var api = getApi();
+    var message;
 
-    if (!redirectUnauthorized(api, error)) showMessage(error.message || '地区加载失败');
+    if (redirectUnauthorized(api, error)) return;
+    message = isForbidden(error) ? '当前账号无权读取地区数据。' : (error.message || '地区加载失败');
+    setPickerState(picker, isForbidden(error) ? 'forbidden' : 'error', message);
+    showMessage(message);
   }
 
   function bindPickerEvents(picker, province, city, district) {
@@ -200,17 +223,33 @@
       resetSelect(city, '请选择市');
       resetSelect(district, '请选择区县');
       updateTargetCode(picker);
-      if (!province.value) return;
+      if (!province.value) {
+        setPickerState(picker, '', '');
+        return;
+      }
 
-      loadChildrenInto(city, province.value, '请选择市').catch(handlePickerError);
+      setPickerState(picker, 'loading', '正在加载市…');
+      loadChildrenInto(city, province.value, '请选择市').then(function () {
+        setPickerState(picker, '', '');
+      }).catch(function (error) {
+        handlePickerError(picker, error);
+      });
     });
 
     city.addEventListener('change', function () {
       resetSelect(district, '请选择区县');
       updateTargetCode(picker);
-      if (!city.value) return;
+      if (!city.value) {
+        setPickerState(picker, '', '');
+        return;
+      }
 
-      loadChildrenInto(district, city.value, '请选择区县').catch(handlePickerError);
+      setPickerState(picker, 'loading', '正在加载区县…');
+      loadChildrenInto(district, city.value, '请选择区县').then(function () {
+        setPickerState(picker, '', '');
+      }).catch(function (error) {
+        handlePickerError(picker, error);
+      });
     });
 
     district.addEventListener('change', function () {
@@ -229,7 +268,11 @@
     resetSelect(city, '请选择市');
     resetSelect(district, '请选择区县');
     bindPickerEvents(picker, province, city, district);
-    picker.__regionInitPromise = loadChildrenInto(province, '0', '请选择省').catch(function (error) {
+    setPickerState(picker, 'loading', '正在加载省…');
+    picker.__regionInitPromise = loadChildrenInto(province, '0', '请选择省').then(function (result) {
+      setPickerState(picker, '', '');
+      return result;
+    }).catch(function (error) {
       picker.__regionInitPromise = null;
       throw error;
     });
@@ -280,12 +323,16 @@
     var list = normalizeList(items);
 
     if (!container) return;
-    container.innerHTML = list.length ? list.map(function (item) {
+    if (!list.length) {
+      setApiState(container, 'empty', '未找到匹配地区');
+      return;
+    }
+    container.innerHTML = list.map(function (item) {
       var code = getRegionCode(item);
       var name = getRegionName(item);
 
       return '<button class="btn ghost magnetic" type="button" data-region-search-result="' + escapeHtml(code) + '">' + escapeHtml(name) + ' ' + escapeHtml(code) + '</button>';
-    }).join('') : '<p class="api-empty">未找到匹配地区</p>';
+    }).join('');
   }
 
   async function submitRegionSearch(form) {
@@ -293,24 +340,35 @@
     var values = getFormValues(form);
     var results = query('[data-region-search-results]', form.parentNode);
     var pathText = query('[data-region-search-path]', form.parentNode);
+    var status = query('[data-region-search-status]', form);
+    var items;
+    var message;
 
     if (redirectUnauthorized(api)) return;
     if (!values.regionKeyword || !values.regionKeyword.trim()) {
+      setApiState(status, 'error', '请输入地区名称或编码');
       showMessage('请输入地区名称或编码');
       return;
     }
 
+    setApiState(status, 'loading', '正在搜索地区…');
+    setApiState(results, 'loading', '正在搜索地区…');
     if (pathText) pathText.textContent = '搜索中...';
     try {
-      renderSearchResults(results, await api.regionSearch({
+      items = await api.regionSearch({
         keyword: values.regionKeyword.trim(),
         limit: 20
-      }));
-      if (pathText) pathText.textContent = '请选择一个地区';
+      });
+      renderSearchResults(results, items);
+      setApiState(status, '', '');
+      if (pathText) pathText.textContent = normalizeList(items).length ? '请选择一个地区' : '未找到匹配地区';
     } catch (error) {
       if (redirectUnauthorized(api, error)) return;
-      if (pathText) pathText.textContent = error.message || '地区搜索失败';
-      showMessage(error.message || '地区搜索失败');
+      message = isForbidden(error) ? '当前账号无权搜索地区。' : (error.message || '地区搜索失败');
+      setApiState(results, isForbidden(error) ? 'forbidden' : 'error', message);
+      setApiState(status, isForbidden(error) ? 'forbidden' : 'error', message);
+      if (pathText) pathText.textContent = message;
+      showMessage(message);
     }
   }
 
@@ -320,21 +378,27 @@
     var section = button.closest('.module-panel');
     var picker = section && query('[data-region-picker]', section);
     var pathText = section && query('[data-region-search-path]', section);
+    var status = section && query('[data-region-search-status]', section);
     var detail;
     var path;
+    var message;
 
     if (!code || !picker || redirectUnauthorized(api)) return;
 
+    setApiState(status, 'loading', '正在定位地区…');
     if (pathText) pathText.textContent = '正在定位地区...';
     try {
       detail = await api.regionDetail(code);
       path = await api.regionPath(getRegionCode(detail) || code);
       await applyRegionSelection(picker, buildRegionSelection(path));
       if (pathText) pathText.textContent = buildPathText(path);
+      setApiState(status, '', '');
     } catch (error) {
       if (redirectUnauthorized(api, error)) return;
-      if (pathText) pathText.textContent = error.message || '地区定位失败';
-      showMessage(error.message || '地区定位失败');
+      message = isForbidden(error) ? '当前账号无权定位地区。' : (error.message || '地区定位失败');
+      setApiState(status, isForbidden(error) ? 'forbidden' : 'error', message);
+      if (pathText) pathText.textContent = message;
+      showMessage(message);
     }
   }
 
@@ -364,7 +428,9 @@
     if (redirectUnauthorized(api)) return;
 
     queryAll('[data-region-picker]').forEach(function (picker) {
-      initPicker(picker).catch(handlePickerError);
+      initPicker(picker).catch(function (error) {
+        handlePickerError(picker, error);
+      });
     });
     bindSearchForms();
   }
@@ -381,6 +447,7 @@
     applyRegionSelection: applyRegionSelection,
     applyProfileRegionSelection: applyProfileRegionSelection,
     shouldRedirectToLogin: shouldRedirectToLogin,
+    isForbidden: isForbidden,
     init: init
   };
 });