feat(dashboard): provider init

be/apps/dashboard/src/modules/settings/components/SettingsNavigation.tsx

@@ -0,0 +1,47 @@
+import { clsxm } from '@afilmory/utils'
+import { NavLink } from 'react-router'
+
+const SETTINGS_TABS = [
+  {
+    id: 'general',
+    label: '通用设置',
+    path: '/settings',
+    end: true,
+  },
+  {
+    id: 'storage',
+    label: '素材存储',
+    path: '/settings/storage',
+    end: false,
+  },
+] as const
+
+interface SettingsNavigationProps {
+  active: (typeof SETTINGS_TABS)[number]['id']
+}
+
+export const SettingsNavigation = ({ active }: SettingsNavigationProps) => {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {SETTINGS_TABS.map((tab) => (
+        <NavLink key={tab.id} to={tab.path} end={tab.end}>
+          {({ isActive }) => {
+            const selected = isActive || active === tab.id
+            return (
+              <span
+                className={clsxm(
+                  'inline-flex items-center rounded-lg px-3 py-1.5 text-xs font-medium transition-all',
+                  selected
+                    ? 'bg-accent/15 text-accent'
+                    : 'bg-fill/10 text-text-secondary hover:bg-fill/20 hover:text-text',
+                )}
+              >
+                {tab.label}
+              </span>
+            )
+          }}
+        </NavLink>
+      ))}
+    </div>
+  )
+}