fix(template): UX bug batch — locale key, banner dupes, HTTPS, i18n holes, query signal

Bugs
- `pages/user/setting/info.tsx`: `Message.success` passed the literal
  locale key `'userSetting.saveSuccess'` instead of `t['…']`, so the
  toast rendered the raw key.
- `pages/login/banner.tsx`: all three carousel slides used the same
  ByteDance CDN URL. Replaced with three distinct local SVGs under
  `pages/login/assets/banner-{1,2,3}.svg` — also kills the HTTPS /
  CN-availability concerns for the login screen.

i18n
- `NavBar.onMenuItemClick` was firing `Message.info(\`You clicked
  ${key}\`)` — English-only literal. Now reads the new
  `navbar.menu.notImplemented` locale key (en + zh-CN), templated
  with `.replace('{key}', key)`.
- `welcome/code-block.tsx` had hardcoded `"点击复制命令"` /
  `"复制成功"`. Moved to `welcome/locale/index.ts` as
  `welcome.codeBlock.copyTooltip` + `…copySuccess`.

HTTPS
- Three `http://p1-arco.byteimg.com/…` refs in
  `dashboard/monitor/{data-statistic-list,studio}.tsx` upgraded to
  `https://`. Mixed-content blocks under any HTTPS deploy were
  silently dropping those images.

Perf — request cancellation
- All 22 `useQuery` callsites across `src/api/*.ts` now destructure
  `{ signal }` from `QueryFunctionContext` and forward it into the
  axios config. TanStack Query already passes the signal in — we
  were dropping it, so navigating away mid-flight kept downloading
  the response.
- `useSearchTableQuery` keeps `placeholderData: keepPreviousData`
  but now needs an explicit `Promise<SearchTableResponse>` return
  annotation: with the destructured-arg queryFn, TS infers a wider
  union (`T | typeof keepPreviousData`) and `data?.list` access at
  the call site breaks. The annotation is the minimal-touch fix.
- Patched three regressions where the bulk-rewrite injected
  `signal` inside a nested `{ params: { type } }` instead of as a
  sibling — verified by typecheck.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: wn0x00

CHANGELOG.md

@@ -5,6 +5,13 @@ Format loosely follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/);
 versions follow [SemVer](https://semver.org/). The npm registry is the
 source of truth: <https://www.npmjs.com/package/@guanzhu.me/arco-cli>.
 
+## [0.11.1] — 2026-05-21
+- **Fix** `pages/user/setting/info.tsx`: `Message.success('userSetting.saveSuccess')` was passing the literal locale **key** instead of the translated string — users saw the raw key in the toast.
+- **Fix** `pages/login/banner.tsx`: all three carousel slides referenced the same image URL. Replaced the three ByteDance CDN URLs with three distinct local SVG illustrations under `pages/login/assets/`.
+- **Fix** i18n holes: `NavBar` menu-item placeholder toast was hardcoded English; `welcome/code-block` had hardcoded zh-CN copy/copied strings. Both now read locale keys.
+- **Security** `http://p1-arco.byteimg.com/...` refs in `dashboard/monitor/{data-statistic-list,studio}.tsx` upgraded to `https://` to avoid mixed-content blocks under HTTPS deploys.
+- **Perf** All `useQuery` hooks across `src/api/*.ts` now forward `signal` from `QueryFunctionContext` into the axios call. TanStack Query aborts the underlying request when the component unmounts or the queryKey changes — previously the response was downloaded and silently dropped. `useSearchTableQuery` gained an explicit `Promise<SearchTableResponse>` annotation to keep type inference clean alongside `placeholderData: keepPreviousData`.
+
 ## [0.11.0] — 2026-05-21
 - **Feat** `arco add api <name>` — scaffold a TanStack Query hook + zod schema + MSW handler in one shot, and auto-register the handler in `src/mock/handlers.ts`. `--method get` (default) generates `useXxxQuery` + list response schema; `--method post|put|delete` generates `useXxxMutation` + input schema + cache invalidation. `--skip-mock` skips the mock generation when the consumer brings their own backend.
 
@@ -136,6 +143,7 @@ source of truth: <https://www.npmjs.com/package/@guanzhu.me/arco-cli>.
 ## [0.1.0] — 2026-05
 - **Initial fork** of the abandoned `arco-cli` under `@guanzhu.me/arco-cli`. Preserves the original interactive template selection and `init` flow; modernises packaging, types, and engines.
 
+[0.11.1]: https://github.com/wn0x00/arco-cli/releases/tag/v0.11.1
 [0.11.0]: https://github.com/wn0x00/arco-cli/releases/tag/v0.11.0
 [0.10.21]: https://github.com/wn0x00/arco-cli/releases/tag/v0.10.21
 [0.10.20]: https://github.com/wn0x00/arco-cli/releases/tag/v0.10.20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guanzhu.me/arco-cli",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Scaffold a modern Arco Design admin (Vite 7 + React 18 + strict TS) — community-maintained CLI with a bundled, modernized arco-design-pro starter.",
   "keywords": [
     "arco",

templates/arco-pro-recommend-full/src/api/analysis.ts

@@ -39,9 +39,9 @@ export const analysisKeys = {
 export function useOverviewCardQuery(type: string) {
   return useQuery({
     queryKey: analysisKeys.overview(type),
-    queryFn: () =>
+    queryFn: ({ signal }) =>
       http
-        .get<PublicOpinionCard>('/api/data-analysis/overview', { params: { type } })
+        .get<PublicOpinionCard>('/api/data-analysis/overview', { params: { type }, signal })
         .then((r) => r.data),
   });
 }
@@ -55,9 +55,9 @@ export function useOverviewCardsQuery(types: Array<{ key: string; type: string }
   const results = useQueries({
     queries: types.map(({ key, type }) => ({
       queryKey: [...analysisKeys.overview(type), key],
-      queryFn: () =>
+      queryFn: ({ signal }) =>
         http
-          .get<PublicOpinionCard>('/api/data-analysis/overview', { params: { type } })
+          .get<PublicOpinionCard>('/api/data-analysis/overview', { params: { type }, signal })
           .then((r) => r.data)
           .then((data) => ({ ...data, key, chartType: type })),
     })),
@@ -71,19 +71,19 @@ export function useOverviewCardsQuery(types: Array<{ key: string; type: string }
 export function useContentPublishingQuery() {
   return useQuery({
     queryKey: analysisKeys.contentPublishing(),
-    queryFn: () =>
+    queryFn: ({ signal }) =>
       http
-        .get<ContentPublishingPoint[]>('/api/data-analysis/content-publishing')
+        .get<ContentPublishingPoint[]>('/api/data-analysis/content-publishing', { signal })
         .then((r) => r.data),
   });
 }
 
 export function useAuthorListQuery() {
   return useQuery({
     queryKey: analysisKeys.authorList(),
-    queryFn: () =>
+    queryFn: ({ signal }) =>
       http
-        .get<{ list: AuthorListRow[] }>('/api/data-analysis/author-list')
+        .get<{ list: AuthorListRow[] }>('/api/data-analysis/author-list', { signal })
         .then((r) => r.data.list),
   });
 }

templates/arco-pro-recommend-full/src/api/list.ts

@@ -31,7 +31,11 @@ export const listKeys = {
 export function useCardListQuery() {
   return useQuery({
     queryKey: listKeys.cards(),
-    queryFn: () => http.get<CardListBundle>('/api/cardList').then((r) => r.data),
+    // `signal` is forwarded to axios so navigating away mid-flight
+    // aborts the request — TanStack Query passes one in automatically
+    // and we hand it straight to axios's request config.
+    queryFn: ({ signal }) =>
+      http.get<CardListBundle>('/api/cardList', { signal }).then((r) => r.data),
   });
 }
 
@@ -43,8 +47,15 @@ export function useCardListQuery() {
 export function useSearchTableQuery(params: Record<string, unknown>) {
   return useQuery({
     queryKey: listKeys.searchTable(params),
-    queryFn: () =>
-      http.get<SearchTableResponse>('/api/list', { params }).then((r) => r.data),
+    // Explicit Promise<T> return annotation — without it, TanStack's
+    // generic infers a union including `typeof keepPreviousData`,
+    // which collapses `data` to `T | <fn>` at the call site and breaks
+    // `data?.list` access. Tightening the annotation is cheaper than
+    // narrowing every consumer.
+    queryFn: ({ signal }): Promise<SearchTableResponse> =>
+      http
+        .get<SearchTableResponse>('/api/list', { params, signal })
+        .then((r) => r.data),
     placeholderData: keepPreviousData,
   });
 }

templates/arco-pro-recommend-full/src/api/messages.ts

@@ -21,7 +21,7 @@ export const messageKeys = {
 export function useMessagesQuery() {
   return useQuery({
     queryKey: messageKeys.list(),
-    queryFn: () => http.get<Message[]>('/api/message/list').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<Message[]>('/api/message/list', { signal }).then((r) => r.data),
   });
 }
 

templates/arco-pro-recommend-full/src/api/monitor.ts

@@ -17,7 +17,7 @@ export const monitorKeys = {
 export function useChatListQuery() {
   return useQuery({
     queryKey: monitorKeys.chatList(),
-    queryFn: () => http.get<ChatMessage[]>('/api/chatList').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<ChatMessage[]>('/api/chatList', { signal }).then((r) => r.data),
     // Live-ish chat list — refetch every 8s while the page is open.
     refetchInterval: 8000,
   });

templates/arco-pro-recommend-full/src/api/multi-dim.ts

@@ -45,24 +45,24 @@ export const multiDimKeys = {
 export function useMultiDimOverviewQuery() {
   return useQuery({
     queryKey: multiDimKeys.overview(),
-    queryFn: () =>
-      http.get<MultiDimOverview>('/api/multi-dimension/overview').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<MultiDimOverview>('/api/multi-dimension/overview', { signal }).then((r) => r.data),
   });
 }
 
 export function useActivityQuery() {
   return useQuery({
     queryKey: multiDimKeys.activity(),
-    queryFn: () =>
-      http.get<ActivityRow[]>('/api/multi-dimension/activity').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<ActivityRow[]>('/api/multi-dimension/activity', { signal }).then((r) => r.data),
   });
 }
 
 export function usePolarQuery() {
   return useQuery({
     queryKey: multiDimKeys.polar(),
-    queryFn: () =>
-      http.get<PolarResponse>('/api/multi-dimension/polar').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<PolarResponse>('/api/multi-dimension/polar', { signal }).then((r) => r.data),
   });
 }
 
@@ -73,9 +73,9 @@ export function useMultiDimCardsQuery(infos: Array<{ key: string; type: string }
       // collapse into a single cache entry (which would give multiple
       // <Col> children the same React key).
       queryKey: [...multiDimKeys.card(type), key],
-      queryFn: () =>
+      queryFn: ({ signal }) =>
         http
-          .get<MultiDimCard>('/api/multi-dimension/card', { params: { type } })
+          .get<MultiDimCard>('/api/multi-dimension/card', { params: { type }, signal })
           .then((r) => r.data)
           .then((data) => ({ ...data, key, chartType: type })),
     })),
@@ -91,9 +91,9 @@ export function useMultiDimCardsQuery(infos: Array<{ key: string; type: string }
 export function useContentSourceQuery() {
   return useQuery({
     queryKey: multiDimKeys.contentSource(),
-    queryFn: () =>
+    queryFn: ({ signal }) =>
       http
-        .get<ContentSourceRow[]>('/api/multi-dimension/content-source')
+        .get<ContentSourceRow[]>('/api/multi-dimension/content-source', { signal })
         .then((r) => r.data),
   });
 }

templates/arco-pro-recommend-full/src/api/profile.ts

@@ -36,13 +36,13 @@ export const profileKeys = {
 export function useBasicProfileQuery() {
   return useQuery({
     queryKey: profileKeys.basic(),
-    queryFn: () => http.get<BasicProfile>('/api/basicProfile').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<BasicProfile>('/api/basicProfile', { signal }).then((r) => r.data),
   });
 }
 
 export function useAdjustmentsQuery() {
   return useQuery({
     queryKey: profileKeys.adjustments(),
-    queryFn: () => http.get<AdjustmentRow[]>('/api/adjustment').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<AdjustmentRow[]>('/api/adjustment', { signal }).then((r) => r.data),
   });
 }

templates/arco-pro-recommend-full/src/api/user-center.ts

@@ -60,49 +60,49 @@ export const userCenterKeys = {
 export function useMyProjectsQuery() {
   return useQuery({
     queryKey: userCenterKeys.projects(),
-    queryFn: () =>
-      http.get<ProjectRow[]>('/api/user/projectList').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<ProjectRow[]>('/api/user/projectList', { signal }).then((r) => r.data),
   });
 }
 
 export function useMyTeamsQuery() {
   return useQuery({
     queryKey: userCenterKeys.teams(),
-    queryFn: () =>
-      http.get<TeamRow[]>('/api/users/teamList').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<TeamRow[]>('/api/users/teamList', { signal }).then((r) => r.data),
   });
 }
 
 export function useLatestNewsQuery() {
   return useQuery({
     queryKey: userCenterKeys.news(),
-    queryFn: () =>
-      http.get<NewsRow[]>('/api/user/latestNews').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<NewsRow[]>('/api/user/latestNews', { signal }).then((r) => r.data),
   });
 }
 
 export function useUserNoticeQuery() {
   return useQuery({
     queryKey: userCenterKeys.notice(),
-    queryFn: () => http.get<unknown[]>('/api/user/notice').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<unknown[]>('/api/user/notice', { signal }).then((r) => r.data),
   });
 }
 
 export function useEnterpriseVerificationQuery() {
   return useQuery({
     queryKey: userCenterKeys.enterprise(),
-    queryFn: () =>
+    queryFn: ({ signal }) =>
       http
-        .get<EnterpriseVerification>('/api/user/verified/enterprise')
+        .get<EnterpriseVerification>('/api/user/verified/enterprise', { signal })
         .then((r) => r.data),
   });
 }
 
 export function useAuthListQuery() {
   return useQuery({
     queryKey: userCenterKeys.authList(),
-    queryFn: () =>
-      http.get<AuthRow[]>('/api/user/verified/authList').then((r) => r.data),
+    queryFn: ({ signal }) =>
+      http.get<AuthRow[]>('/api/user/verified/authList', { signal }).then((r) => r.data),
   });
 }
 

templates/arco-pro-recommend-full/src/api/user.ts

@@ -33,7 +33,7 @@ export const userKeys = {
 export function useUserInfoQuery() {
   return useQuery({
     queryKey: userKeys.info(),
-    queryFn: () => http.get<UserInfo>('/api/user/userInfo').then((r) => r.data),
+    queryFn: ({ signal }) => http.get<UserInfo>('/api/user/userInfo', { signal }).then((r) => r.data),
   });
 }