Eisland Dev Add Empty Setting Subpage

// If the type already exists, add the new key to the union
export type XxxSettingsPageKey = 'existing-page' | 'new-page';
// If creating a new type, add it after similar types

export type SettingsTabLabelKey = SettingsSidebarTabKey | AppSettingsPageKey | AiSettingsPageKey | MusicNavCardKey | NewPageKey;

'new-page': '新页面名称',

'new-page': '新页面描述',

export const XXX_SETTINGS_PAGES: XxxSettingsPageKey[] = ['existing-page', 'new-page'];
export const XXX_SETTINGS_PAGE_LABELS: Record<XxxSettingsPageKey, string> = {
  'existing-page': '已有页面',
  'new-page': '新页面',
};

import type { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import { SettingsPageNavigation } from '../SettingsPageNavigation';
import type { XxxSettingsPageKey } from '../../utils/settingsConfig';

export interface XxxSettingsPageDotsProps {
  xxxSettingsPage: XxxSettingsPageKey;
  expanded: boolean;
  xxxSettingsPages: XxxSettingsPageKey[];
  settingsTabLabels: Record<string, string>;
  setXxxSettingsPage: (page: XxxSettingsPageKey) => void;
}

export function XxxSettingsPageDots({
  xxxSettingsPage,
  expanded,
  xxxSettingsPages,
  settingsTabLabels,
  setXxxSettingsPage,
}: XxxSettingsPageDotsProps): ReactElement {
  const { t } = useTranslation();
  return (
    <SettingsPageNavigation
      activePage={xxxSettingsPage}
      expanded={expanded}
      pages={xxxSettingsPages}
      pageLabels={settingsTabLabels}
      navigationLabel={t('settings.xxx.pagination')}
      onSelectPage={setXxxSettingsPage}
    />
  );
}

import { useState, type ReactElement } from 'react';
import { XxxSettingsPageDots } from './XxxSettingsPageDots';
import { SettingsPageNavigationToggle } from '../SettingsPageNavigation';
import type { XxxSettingsPageKey } from '../../utils/settingsConfig';

currentXxxSettingsPageLabel: string;
xxxSettingsPage: XxxSettingsPageKey;
xxxSettingsPages: XxxSettingsPageKey[];
xxxSettingsPageLabels: Record<string, string>;
setXxxSettingsPage: (page: XxxSettingsPageKey) => void;

const [pageNavigationExpanded, setPageNavigationExpanded] = useState(false);

// Wrap existing content in a page render function
const renderExistingPage = (): ReactElement => (
  <div className="settings-cards">
    {/* existing cards here */}
  </div>
);

// Add new empty page
const renderNewPage = (): ReactElement => (
  <div className="settings-cards">
    {/* empty - to be implemented */}
  </div>
);

const renderCurrentPage = (): ReactElement | null => {
  switch (xxxSettingsPage) {
    case 'existing-page':
      return renderExistingPage();
    case 'new-page':
      return renderNewPage();
    default:
      return null;
  }
};

return (
  <div className="max-expand-settings-section">
    <div className="max-expand-settings-title settings-app-title-line">
      <span>{t('settings.labels.xxx', { defaultValue: 'XXX设置' })}</span>
      <span className="settings-app-title-sub">- {currentXxxSettingsPageLabel}</span>
      <SettingsPageNavigationToggle
        expanded={pageNavigationExpanded}
        label={t(pageNavigationExpanded ? 'settings.navigation.collapse' : 'settings.navigation.expand')}
        onToggle={() => setPageNavigationExpanded((current) => !current)}
      />
    </div>
    <div className="settings-app-pages-layout">
      <div className="settings-app-page-main">{renderCurrentPage()}</div>
      <XxxSettingsPageDots
        xxxSettingsPage={xxxSettingsPage}
        expanded={pageNavigationExpanded}
        xxxSettingsPages={xxxSettingsPages}
        settingsTabLabels={xxxSettingsPageLabels}
        setXxxSettingsPage={setXxxSettingsPage}
      />
    </div>
  </div>
);

import {
  // ... existing imports
  XXX_SETTINGS_PAGES,
  XXX_SETTINGS_PAGE_LABELS,
  type XxxSettingsPageKey,
} from './setting/utils/settingsConfig';

const [xxxSettingsPage, setXxxSettingsPage] = useState<XxxSettingsPageKey>('default-page');

const currentXxxSettingsPageLabel = t(`settings.xxxPages.${xxxSettingsPage}`, { defaultValue: XXX_SETTINGS_PAGE_LABELS[xxxSettingsPage] || '默认页面' });

const translatedXxxSettingsPageLabels = useMemo<Record<XxxSettingsPageKey, string>>(() => ({
  'existing-page': t('settings.xxxPages.existing-page', { defaultValue: XXX_SETTINGS_PAGE_LABELS['existing-page'] }),
  'new-page': t('settings.xxxPages.new-page', { defaultValue: XXX_SETTINGS_PAGE_LABELS['new-page'] }),
}), [t]);

<XxxSettingsSection
  // ... existing props
  currentXxxSettingsPageLabel={currentXxxSettingsPageLabel}
  xxxSettingsPage={xxxSettingsPage}
  xxxSettingsPages={XXX_SETTINGS_PAGES}
  xxxSettingsPageLabels={translatedXxxSettingsPageLabels}
  setXxxSettingsPage={setXxxSettingsPage}
/>

"xxxPages": {
  "existing-page": "已有页面",
  "new-page": "新页面"
},

"xxxPages": {
  "existing-page": "Existing Page",
  "new-page": "New Page"
},

npx tsc --noEmit --skipLibCheck

node -e "JSON.parse(require('fs').readFileSync('i18n/zh-CN.json', 'utf8')); console.log('OK')"
node -e "JSON.parse(require('fs').readFileSync('i18n/en-US.json', 'utf8')); console.log('OK')"