adspecs 0.1.12

package/references/antd-front-demo/src/components/Icon/iconMap.ts

@@ -0,0 +1,131 @@
+/**
+ * Maps backend (Iconify-style) icon names to Ant Design 6 icon component names.
+ *
+ * Backend menu `icon` field uses Element Plus / FontAwesome / Tabler / Simple-Icons
+ * naming. Each entry below is the closest Ant Design 6 outlined equivalent — for
+ * icons without a 1:1 antd version we pick the semantically nearest variant.
+ *
+ * If a backend value is already an antd component name (ends with
+ * `Outlined` / `Filled` / `TwoTone`), it is passed through unchanged.
+ */
+export const ICON_MAP: Record<string, string> = {
+  // ── Element Plus ──────────────────────────────────────────────
+  'ep:aim': 'AimOutlined',
+  'ep:avatar': 'UserOutlined',
+  'ep:box': 'InboxOutlined',
+  'ep:calendar': 'CalendarOutlined',
+  'ep:chat-dot-round': 'CommentOutlined',
+  'ep:chat-square': 'MessageOutlined',
+  'ep:coffee-cup': 'CoffeeOutlined',
+  'ep:collection': 'BookOutlined',
+  'ep:collection-tag': 'TagsOutlined',
+  'ep:connection': 'ApiOutlined',
+  'ep:copy-document': 'CopyOutlined',
+  'ep:data-analysis': 'BarChartOutlined',
+  'ep:document': 'FileOutlined',
+  'ep:document-copy': 'FileTextOutlined',
+  'ep:files': 'FolderOutlined',
+  'ep:flag': 'FlagOutlined',
+  'ep:goods': 'ShoppingOutlined',
+  'ep:grid': 'AppstoreOutlined',
+  'ep:house': 'HomeOutlined',
+  'ep:key': 'KeyOutlined',
+  'ep:list': 'UnorderedListOutlined',
+  'ep:location': 'EnvironmentOutlined',
+  'ep:map-location': 'EnvironmentOutlined',
+  'ep:menu': 'MenuOutlined',
+  'ep:message': 'MessageOutlined',
+  'ep:message-box': 'MailOutlined',
+  'ep:monitor': 'DesktopOutlined',
+  'ep:notebook': 'ReadOutlined',
+  'ep:office-building': 'BankOutlined',
+  'ep:operation': 'ControlOutlined',
+  'ep:picture-rounded': 'PictureOutlined',
+  'ep:place': 'EnvironmentOutlined',
+  'ep:position': 'AuditOutlined',
+  'ep:promotion': 'LoginOutlined',
+  'ep:set-up': 'ToolOutlined',
+  'ep:setting': 'SettingOutlined',
+  'ep:sort': 'SortAscendingOutlined',
+  'ep:takeaway-box': 'NotificationOutlined',
+  'ep:tickets': 'ProfileOutlined',
+  'ep:tools': 'SettingOutlined',
+  'ep:upload-filled': 'UploadOutlined',
+  'ep:user': 'TeamOutlined',
+  'ep:warning-filled': 'WarningOutlined',
+
+  // ── FontAwesome (regular) ─────────────────────────────────────
+  'fa:address-book-o': 'IdcardOutlined',
+  'fa:address-card': 'ApartmentOutlined',
+  'fa:archive': 'InboxOutlined',
+  'fa:bars': 'UnorderedListOutlined',
+  'fa:bookmark-o': 'BookOutlined',
+  'fa:connectdevelop': 'ShareAltOutlined',
+  'fa:dashcube': 'SafetyCertificateOutlined',
+  'fa:dedent': 'MenuFoldOutlined',
+  'fa:delicious': 'CheckSquareOutlined',
+  'fa:edit': 'EditOutlined',
+  'fa:eye': 'EyeOutlined',
+  'fa:file-image-o': 'FileImageOutlined',
+  'fa:hdd-o': 'AppstoreOutlined',
+  'fa:key': 'KeyOutlined',
+  'fa:leanpub': 'FormOutlined',
+  'fa:map': 'CompassOutlined',
+  'fa:map-marker': 'EnvironmentOutlined',
+  'fa:medium': 'BranchesOutlined',
+  'fa:music': 'CustomerServiceOutlined',
+  'fa:object-ungroup': 'FolderOpenOutlined',
+  'fa:power-off': 'PoweroffOutlined',
+  'fa:reddit-square': 'DatabaseOutlined',
+  'fa:road': 'NodeExpandOutlined',
+  'fa:rocket': 'RocketOutlined',
+  'fa:sitemap': 'ApartmentOutlined',
+  'fa:slack': 'ScheduleOutlined',
+  'fa:square': 'BorderOutlined',
+  'fa:stack-exchange': 'SwapOutlined',
+  'fa:tag': 'TagOutlined',
+  'fa:tasks': 'OrderedListOutlined',
+  'fa:tree': 'BranchesOutlined',
+  'fa:universal-access': 'GlobalOutlined',
+  'fa:user-secret': 'TeamOutlined',
+  'fa:wpexplorer': 'FunctionOutlined',
+  'fa:wpforms': 'FormOutlined',
+
+  // ── FontAwesome (solid) ───────────────────────────────────────
+  'fa-solid:book': 'BookOutlined',
+  'fa-solid:book-reader': 'ReadOutlined',
+  'fa-solid:box': 'DatabaseOutlined',
+  'fa-solid:file-signature': 'FileTextOutlined',
+  'fa-solid:grin-stars': 'StarOutlined',
+  'fa-solid:house-user': 'ClusterOutlined',
+  'fa-solid:mail-bulk': 'MailOutlined',
+  'fa-solid:project-diagram': 'DeploymentUnitOutlined',
+  'fa-solid:tasks': 'ScheduleOutlined',
+  'fa-solid:tools': 'ToolOutlined',
+
+  // ── Simple Icons ──────────────────────────────────────────────
+  'simple-icons:civicrm': 'TeamOutlined',
+  'simple-icons:erpnext': 'ShopOutlined',
+
+  // ── Tabler ────────────────────────────────────────────────────
+  'tabler:ai': 'OpenAIOutlined',
+
+  // ── MDM-specific icons ────────────────────────────────────────
+  'ep:barcode': 'BarcodeOutlined',
+  'fa:barcode': 'BarcodeOutlined',
+  'fa:database': 'DatabaseOutlined',
+};
+
+/**
+ * Resolve an arbitrary icon name (backend Iconify-style or already an antd
+ * component name) to the matching Ant Design icon component name.
+ * Returns `undefined` when nothing matches.
+ */
+export function resolveAntdIconName(icon: string | null | undefined): string | undefined {
+  if (!icon) return undefined;
+  if (ICON_MAP[icon]) return ICON_MAP[icon];
+  if (icon.endsWith('Outlined') || icon.endsWith('Filled') || icon.endsWith('TwoTone')) {
+    return icon;
+  }
+  return undefined;
+}

package/references/antd-front-demo/src/components/Icon/index.tsx

@@ -0,0 +1,62 @@
+import { createElement, type CSSProperties } from 'react';
+import * as AntIcons from '@ant-design/icons';
+import { resolveAntdIconName } from './iconMap';
+
+type AntIconLike = React.ComponentType<{
+  className?: string;
+  style?: CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+}>;
+
+const ANT_ICONS = AntIcons as unknown as Record<string, AntIconLike | undefined>;
+
+export interface IconProps {
+  /**
+   * Icon name. Accepts either:
+   *  - A backend / Iconify-style name (e.g. `"ep:tools"`, `"fa:edit"`,
+   *    `"tabler:ai"`) — resolved via `iconMap`.
+   *  - An Ant Design icon component name (e.g. `"SettingOutlined"`,
+   *    `"WarningFilled"`) — used directly.
+   */
+  icon?: string | null;
+  /** CSS color, applied as `style.color`. */
+  color?: string;
+  /** Size in px when given a number, or any CSS length when given a string. Defaults to 16. */
+  size?: number | string;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+}
+
+/**
+ * Generic icon renderer that mirrors the Vue project's `Icon.vue` API
+ * (`icon` / `color` / `size` / `class`) on top of Ant Design 6 icon
+ * components.
+ *
+ * Backend menu icons (Iconify-style: `ep:*` / `fa:*` / `simple-icons:*`) are
+ * translated through {@link iconMap}, so feature pages can write
+ * `<Icon icon="ep:tools" />` directly. Returns `null` when the name can't be
+ * resolved — callers don't need to pre-check, and the layout doesn't break.
+ */
+const Icon: React.FC<IconProps> = ({
+  icon,
+  color,
+  size = 16,
+  className,
+  style,
+  onClick,
+}) => {
+  const antdName = resolveAntdIconName(icon);
+  if (!antdName) return null;
+  const Component = ANT_ICONS[antdName];
+  if (!Component) return null;
+
+  const fontSize = typeof size === 'number' ? `${size}px` : size;
+  return createElement(Component, {
+    className,
+    style: { fontSize, color, ...style },
+    onClick,
+  });
+};
+
+export default Icon;

package/references/antd-front-demo/src/hooks/useAccess.ts

@@ -0,0 +1,5 @@
+import { useAuthStore } from '@/stores/useAuthStore';
+
+export function useAccess(code: string): boolean {
+  return useAuthStore((s) => s.hasPermission(code));
+}

package/references/antd-front-demo/src/i18n/index.ts

@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import resourcesToBackend from 'i18next-resources-to-backend';
+
+const localeModules = import.meta.glob<Record<string, unknown>>('@/locales/**/*.ts', { eager: true });
+
+i18n
+  .use(
+    resourcesToBackend((lng: string, ns: string) => {
+      const path = `/src/locales/${lng}/${ns}.ts`;
+      const module = localeModules[path];
+      return module?.default ?? {};
+    })
+  )
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem('app-language') || 'zh-CN',
+    fallbackLng: 'zh-CN',
+    interpolation: { escapeValue: false },
+  });
+
+export default i18n;

package/references/antd-front-demo/src/layouts/AdminLayout/Header.tsx

@@ -0,0 +1,137 @@
+import { useState, useMemo } from 'react';
+import { useNavigate, useLocation } from 'react-router';
+import { Layout, Breadcrumb, Dropdown, Avatar, Switch, theme } from 'antd';
+import type { MenuProps } from 'antd';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  UserOutlined,
+  LogoutOutlined,
+  SettingOutlined,
+  SunOutlined,
+  MoonOutlined,
+  GlobalOutlined,
+} from '@ant-design/icons';
+import StyleSettings from './StyleSettings';
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '@/stores/useAppStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { findBreadcrumb } from '@/router/dynamicRoutes';
+
+const Header: React.FC = () => {
+  const { t } = useTranslation('header');
+  const { token: themeToken } = theme.useToken();
+  const collapsed = useAppStore((s) => s.collapsed);
+  const toggleCollapsed = useAppStore((s) => s.toggleCollapsed);
+  const darkMode = useAppStore((s) => s.darkMode);
+  const toggleDarkMode = useAppStore((s) => s.toggleDarkMode);
+  const setLanguage = useAppStore((s) => s.setLanguage);
+  const userInfo = useAuthStore((s) => s.userInfo);
+  const menus = useAuthStore((s) => s.menus);
+  const logout = useAuthStore((s) => s.logout);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [styleOpen, setStyleOpen] = useState(false);
+
+  const breadcrumbItems = useMemo(
+    () => findBreadcrumb(location.pathname, menus),
+    [location.pathname, menus],
+  );
+
+  const langItems: MenuProps['items'] = [
+    {
+      key: 'zh-CN',
+      label: t('chinese'),
+      onClick: () => setLanguage('zh-CN'),
+    },
+    {
+      key: 'en-US',
+      label: t('english'),
+      onClick: () => setLanguage('en-US'),
+    },
+  ];
+
+  const userMenuItems: MenuProps['items'] = [
+    { key: 'profile', icon: <UserOutlined />, label: t('profile') },
+    { key: 'style', icon: <SettingOutlined />, label: t('styleSettings') },
+    { type: 'divider' },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: t('logout'),
+      danger: true,
+    },
+  ];
+
+  const handleMenuClick: MenuProps['onClick'] = async ({ key }) => {
+    if (key === 'logout') {
+      await logout();
+      navigate('/login', { replace: true });
+    } else if (key === 'style') {
+      setStyleOpen(true);
+    } else if (key === 'profile') {
+      navigate('/profile');
+    }
+  };
+
+  return (
+    <Layout.Header
+      style={{
+        padding: '0 24px',
+        height: '50px',
+        background: themeToken.colorBgContainer,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: `1px solid ${themeToken.colorBorderSecondary}`,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <span
+          onClick={toggleCollapsed}
+          style={{ cursor: 'pointer', fontSize: 18 }}
+        >
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </span>
+        <Breadcrumb items={breadcrumbItems} />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <Dropdown menu={{ items: langItems }} placement="bottomRight" arrow>
+          <span style={{ cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <GlobalOutlined />
+            <span style={{ fontSize: 12 }}>{t('language_indicator')}</span>
+          </span>
+        </Dropdown>
+        <Switch
+          checkedChildren={<MoonOutlined />}
+          unCheckedChildren={<SunOutlined />}
+          checked={darkMode}
+          onChange={toggleDarkMode}
+        />
+        <Dropdown
+          menu={{ items: userMenuItems, onClick: handleMenuClick }}
+          placement="bottomRight" arrow
+        >
+          <span
+            style={{
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <Avatar
+              icon={<UserOutlined />}
+              src={userInfo?.avatar || undefined}
+              size="small"
+            />
+            <span>{userInfo?.nickname || userInfo?.username}</span>
+          </span>
+        </Dropdown>
+      </div>
+      <StyleSettings open={styleOpen} onClose={() => setStyleOpen(false)} />
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/references/antd-front-demo/src/layouts/AdminLayout/Sidebar.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router';
+import { Layout, Menu } from 'antd';
+import type { MenuProps } from 'antd';
+import { useAppStore } from '@/stores/useAppStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { WindowsOutlined } from '@ant-design/icons';
+import { menusToMenuItems, findOpenKeys, findActiveMenuMeta } from '@/router/dynamicRoutes';
+
+function useActivePath(): string {
+  const location = useLocation();
+  const menus = useAuthStore((s) => s.menus);
+  const activeMenu = findActiveMenuMeta(location.pathname, menus);
+  return activeMenu || location.pathname;
+}
+
+const Sidebar: React.FC = () => {
+  const collapsed = useAppStore((s) => s.collapsed);
+  const menuTheme = useAppStore((s) => s.menuTheme);
+  const menus = useAuthStore((s) => s.menus);
+  const navigate = useNavigate();
+  const activePath = useActivePath();
+  const menuItems = useMemo(() => menusToMenuItems(menus), [menus]);
+
+  /**
+   * 受控 `openKeys`：保持菜单聚焦简洁。任意层级只允许同时展开一条祖先链 ——
+   * 点击任一子菜单时，其它分支全部收起。
+   *
+   * 参考 https://ant.design/components/menu-cn#menu-demo-sider-current 的 accordion 写法，
+   * 在此基础上将"只允许一条根级"扩展为"任意层级都收紧到一条分支"。
+   */
+  const [openKeys, setOpenKeys] = useState<string[]>([]);
+
+  // 路由切换或菜单数据更新：把 openKeys 同步成"激活路径所在的那条分支"
+  useEffect(() => {
+    setOpenKeys(findOpenKeys(activePath, menus)); // eslint-disable-line react-hooks/set-state-in-effect
+  }, [activePath, menus]);
+
+  const handleOpenChange: MenuProps['onOpenChange'] = (keys) => {
+    // 找到本次新打开的 key（不在旧 openKeys 中的）
+    const latestOpenKey = keys.find((k) => !openKeys.includes(k));
+    if (latestOpenKey) {
+      // 用户打开了一个子菜单 → 只保留它本身 + 其祖先链，其它分支全部收起
+      setOpenKeys([...findOpenKeys(latestOpenKey, menus), latestOpenKey]);
+    } else {
+      // 仅是收起操作 → 直接同步
+      setOpenKeys(keys);
+    }
+  };
+
+  const siderStyle: React.CSSProperties = {
+    overflow: 'auto',
+    height: '100vh',
+    position: 'fixed',
+    insetInlineStart: 0,
+    top: 0,
+    scrollbarWidth: 'thin',
+    scrollbarGutter: 'stable',
+    left: 0,
+    bottom: 0,
+  };
+
+  const sidebarTitle = import.meta.env.VITE_APP_SIDEBAR_TITLE || '';
+  return (
+    <Layout.Sider
+      trigger={null}
+      collapsible
+      collapsed={collapsed}
+      theme={menuTheme}
+      width={230}
+      collapsedWidth={64}
+      style={siderStyle}
+    >
+      <div
+        style={{
+          height: 64,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: menuTheme === 'dark' ? '#fff' : '#000',
+        }}
+      >
+        <span style={{ fontSize: 24 }}><WindowsOutlined /></span>
+        {!collapsed && (
+          <span style={{ marginLeft: 8, fontSize: 18, fontWeight: 700 }}>
+            {sidebarTitle}
+          </span>
+        )}
+      </div>
+      <Menu
+        theme={menuTheme}
+        mode="inline"
+        selectedKeys={[activePath]}
+        openKeys={openKeys}
+        onOpenChange={handleOpenChange}
+        items={menuItems}
+        onClick={({ key }) => navigate(key)}
+      />
+    </Layout.Sider>
+  );
+};
+
+export default Sidebar;

package/references/antd-front-demo/src/layouts/AdminLayout/StyleSettings.tsx

@@ -0,0 +1,165 @@
+import { Drawer, Radio, ColorPicker, theme } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { useAppStore } from '@/stores/useAppStore';
+
+interface StyleSettingsProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const PRESET_COLORS = [
+  { color: '#1677ff', nameKey: 'colorBlue' },
+  { color: '#13c2c2', nameKey: 'colorCyan' },
+  { color: '#52c41a', nameKey: 'colorGreen' },
+  { color: '#722ed1', nameKey: 'colorPurple' },
+  { color: '#eb2f96', nameKey: 'colorPink' },
+  { color: '#fa541c', nameKey: 'colorOrange' },
+  { color: '#faad14', nameKey: 'colorYellow' },
+  { color: '#2f54eb', nameKey: 'colorIndigo' },
+];
+
+const StyleSettings: React.FC<StyleSettingsProps> = ({ open, onClose }) => {
+  const { t } = useTranslation('header');
+  const { token: themeToken } = theme.useToken();
+  const primaryColor = useAppStore((s) => s.primaryColor);
+  const componentSize = useAppStore((s) => s.componentSize);
+  const menuTheme = useAppStore((s) => s.menuTheme);
+  const setPrimaryColor = useAppStore((s) => s.setPrimaryColor);
+  const setComponentSize = useAppStore((s) => s.setComponentSize);
+  const setMenuTheme = useAppStore((s) => s.setMenuTheme);
+
+  const isPresetColor = PRESET_COLORS.some((c) => c.color === primaryColor);
+
+  return (
+    <Drawer
+      title={t('styleSettings')}
+      placement="right"
+      styles={{ wrapper: { width: 360 } }}
+      open={open}
+      onClose={onClose}
+      maskClosable={false}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+        <div>
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 500,
+              marginBottom: 16,
+              color: themeToken.colorTextHeading,
+            }}
+          >
+            {t('themeColor')}
+          </div>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            {PRESET_COLORS.map(({ color, nameKey }) => (
+              <div
+                key={color}
+                onClick={() => setPrimaryColor(color)}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 4,
+                  cursor: 'pointer',
+                }}
+              >
+                <div
+                  style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: '50%',
+                    backgroundColor: color,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border:
+                      primaryColor === color
+                        ? `2px solid ${themeToken.colorText}`
+                        : '2px solid transparent',
+                    transition: 'border-color 0.2s',
+                  }}
+                >
+                  {primaryColor === color && (
+                    <CheckOutlined
+                      style={{ color: '#fff', fontSize: 14, fontWeight: 'bold' }}
+                    />
+                  )}
+                </div>
+                <span style={{ fontSize: 12, color: themeToken.colorTextSecondary }}>
+                  {t(nameKey)}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              marginTop: 16,
+            }}
+          >
+            <ColorPicker
+              value={primaryColor}
+              onChange={(_, hex) => setPrimaryColor(hex)}
+              presets={[]}
+              showText
+            />
+            <span style={{ color: themeToken.colorTextSecondary, fontSize: 13 }}>
+              {!isPresetColor && t('customColor')}
+            </span>
+          </div>
+        </div>
+
+        <div>
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 500,
+              marginBottom: 16,
+              color: themeToken.colorTextHeading,
+            }}
+          >
+            {t('componentSize')}
+          </div>
+          <Radio.Group
+            value={componentSize}
+            onChange={(e) => setComponentSize(e.target.value)}
+            optionType="button"
+            buttonStyle="solid"
+          >
+            <Radio.Button value="small">{t('sizeSmall')}</Radio.Button>
+            <Radio.Button value="middle">{t('sizeMiddle')}</Radio.Button>
+            <Radio.Button value="large">{t('sizeLarge')}</Radio.Button>
+          </Radio.Group>
+        </div>
+
+        <div>
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 500,
+              marginBottom: 16,
+              color: themeToken.colorTextHeading,
+            }}
+          >
+            {t('menuTheme')}
+          </div>
+          <Radio.Group
+            value={menuTheme}
+            onChange={(e) => setMenuTheme(e.target.value)}
+            optionType="button"
+            buttonStyle="solid"
+          >
+            <Radio.Button value="dark">{t('menuThemeDark')}</Radio.Button>
+            <Radio.Button value="light">{t('menuThemeLight')}</Radio.Button>
+          </Radio.Group>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default StyleSettings;

package/references/antd-front-demo/src/layouts/AdminLayout/index.tsx

@@ -0,0 +1,25 @@
+import { Outlet } from 'react-router';
+import { Layout } from 'antd';
+import Sidebar from './Sidebar';
+import Header from './Header';
+import Footer from '@/components/Footer';
+import { useAppStore } from '@/stores/useAppStore';
+
+const AdminLayout: React.FC = () => {
+  const collapsed = useAppStore((s) => s.collapsed);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sidebar />
+      <Layout style={{ marginLeft: collapsed ? 64 : 230, transition: 'margin-left 0.2s' }}>
+        <Header />
+        <Layout.Content style={{ margin: 12, overflow: 'initial', minHeight: 280 }}>
+          <Outlet />
+        </Layout.Content>
+        <Footer />
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AdminLayout;

package/references/antd-front-demo/src/locales/en-US/aps/coil.ts

@@ -0,0 +1,18 @@
+export default {
+  title: 'Coil Management',
+  coilId: 'Coil ID',
+  alloy: 'Alloy',
+  temper: 'Temper',
+  width: 'Width (mm)',
+  thickness: 'Thickness (mm)',
+  weight: 'Weight (tons)',
+  inDate: 'In Date',
+  status: 'Status',
+  createTime: 'Create Time',
+  deleteConfirm: 'Are you sure to delete this coil?',
+  import: 'Import',
+  export: 'Export',
+  downloadTemplate: 'Download Template',
+  importSuccess: 'Successfully imported {{count}} records',
+  importFailed: 'Failed to import {{count}} records',
+};