Ant Design 组件

灵动桌面框架集成了 Ant Design 6.3+，提供企业级 UI 组件。

全局配置

// src/App.tsx
import { ConfigProvider, theme } from 'antd'
import zhCN from 'antd/locale/zh_CN'

<ConfigProvider
  locale={zhCN}
  theme={{
    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: '#1677ff',
      borderRadius: 8,
    },
  }}
>
  {children}
</ConfigProvider>

常用布局

主布局（Sider + Header + Content）

import { Layout } from 'antd'
const { Sider, Header, Content } = Layout

function AppLayout() {
  return (
    <Layout className="h-screen">
      <Sider width={220} collapsible>
        <Sidebar />
      </Sider>
      <Layout>
        <Header className="bg-white px-4">
          <TopBar />
        </Header>
        <Content className="p-6 overflow-auto">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

表单

import { Form, Input, Button, message } from 'antd'
import { setConfig } from '@/lib/api'

function SettingsForm() {
  const [form] = Form.useForm()

  const onFinish = async (values: { key: string; value: string }) => {
    await setConfig(values.key, values.value)
    message.success('保存成功')
  }

  return (
    <Form form={form} layout="vertical" onFinish={onFinish}>
      <Form.Item name="key" label="配置项" rules={[{ required: true }]}>
        <Input placeholder="输入配置键名" />
      </Form.Item>
      <Form.Item name="value" label="值" rules={[{ required: true }]}>
        <Input.TextArea rows={3} />
      </Form.Item>
      <Button type="primary" htmlType="submit">保存</Button>
    </Form>
  )
}

表格

import { Table } from 'antd'
import type { AppConfig } from '@/types'

const columns = [
  { title: '配置项', dataIndex: 'key', key: 'key' },
  { title: '值', dataIndex: 'value', key: 'value' },
  { title: '更新时间', dataIndex: 'updated_at', key: 'updated_at' },
]

function ConfigTable({ data }: { data: AppConfig[] }) {
  return <Table columns={columns} dataSource={data} rowKey="id" />
}

图标

框架同时使用 Lucide React 和 Ant Design Icons：

import { Home, Settings, Info } from 'lucide-react'
import { GithubOutlined } from '@ant-design/icons'

<Home size={16} />
<Settings size={16} />
<GithubOutlined />