### Install DuxUI Example Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/start.md

Install the duxuiExample module to view usage examples.

```bash
yarn duxapp app add duxuiExample
```

--------------------------------

### Install Design Example Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/design/start.md

Install the designExample module for a ready-to-use experience. After installation, run the development command to see the effect.

```bash
yarn duxapp app add designExample
```

```bash
yarn dev:h5 --app=designExample
```

--------------------------------

### Install duxappCompress

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/duxappCompress/start.md

Install the duxappCompress package using yarn.

```bash
yarn duxapp app add duxappCompress
```

--------------------------------

### Step Component Example

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/show/Step.md

Demonstrates the usage of the Step component for both horizontal and vertical layouts. Includes custom rendering for start and end points of each step.

```jsx
import { Header, ScrollView, TopView, Step, GroupList, Text, Column } from '@/duxuiExample'

const list = [
  { name: '阶段1', time: '06-18 14:22' },
  { name: '阶段2', time: '06-19 14:27' },
  { name: '阶段3', time: '06-20 15:12' },
  { name: '阶段4', time: '06-21 12:22' },
  { name: '阶段5', time: '06-22 14:22' },
  { name: '阶段6', time: '06-23 14:24' },
]



export default function StepExample() {
  return <TopView>
    <Header title='Step' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='横向'>
          <Step
            data={list}
            startSize={30}
            renderStart={Start}
            renderEnd={End}
          />
        </GroupList.Item>
        <GroupList.Item title='纵向'>
          <Step
            vertical
            data={list}
            startSize={150}
            renderStart={VerticalStart}
            renderEnd={VerticalEnd}
            pointTop={65}
          />
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}

const Start = ({
  item
}) => {
  return <Text align='center' size={1}>{item.name}</Text>
}

const End = ({
  item
}) => {
  return <Column className='pv-1 ph-2 bg-white r-2 mh-2'>
    <Text size={1} align='center'>{item.time}</Text>
  </Column>
}

const VerticalStart = ({
  item
}) => {
  return <Column className='p-3 r-2 bg-white mt-3'>
    <Text>{item.name}</Text>
  </Column>
}

const VerticalEnd = ({
  item
}) => {
  return <Column className='p-3 r-2 bg-white mt-3'>
    <Text>{item.time}</Text>
  </Column>
}

```

--------------------------------

### Install DuxApp Canvas

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/canvas/start.md

Install the duxappCanvas package using yarn.

```bash
yarn duxapp app add duxappCanvas
```

--------------------------------

### Create duxui Example Project

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2024-09-26-duxui/index.md

Use this command to generate a sample project for duxui to view component effects and source code.

```bash
npx duxapp-cli create projectName duxuiExample
```

--------------------------------

### Start React Native Service

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/rn/start.md

Starts the React Native development server. This is used when you haven't compiled the app before or if the service started by the build command has issues.

```bash
yarn start --app=moduleName
```

--------------------------------

### Chart.js Initialization and Examples

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/duxappChartJs/start.md

This example demonstrates how to initialize Chart.js with DuxApp and includes configurations for various chart types. Ensure all necessary Chart.js components are registered before use. The charts update dynamically based on a timer.

```jsx
import { Chart } from '@/duxappChartJs'
import { Header, ScrollView, TopView, GroupList, px } from '@/duxuiExample'
import {
  Chart as ChartJS,
  ArcElement,
  BarController,
  BarElement,
  BubbleController,
  CategoryScale,
  DoughnutController,
  Filler,
  Legend,
  LineController,
  LineElement,
  LinearScale,
  PieController,
  PointElement,
  PolarAreaController,
  RadarController,
  RadialLinearScale,
  ScatterController,
  Tooltip
} from 'chart.js'
import { useEffect, useMemo, useState } from 'react'

let registered = false
const ensureRegister = () => {
  if (registered) return
  ChartJS.register(
    ArcElement,
    BarController,
    BarElement,
    BubbleController,
    CategoryScale,
    DoughnutController,
    Filler,
    Legend,
    LineController,
    LineElement,
    LinearScale,
    PieController,
    PointElement,
    PolarAreaController,
    RadarController,
    RadialLinearScale,
    ScatterController,
    Tooltip
  )
  registered = true
}

const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const pieLabels = ['A', 'B', 'C', 'D', 'E']
const radarLabels = ['Speed', 'Power', 'Skill', 'Stamina', 'Luck']

const randomData = () => labels.map(() => Math.round(Math.random() * 300))
const randomInt = (min, max) => Math.round(min + Math.random() * (max - min))

const palette = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316']
const sliceColors = (count) => Array.from({ length: count }, (_, i) => palette[i % palette.length])
const commonOptions = {
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false }
  }
}

export default function ChartJsExample() {
  ensureRegister()

  const [version, setVersion] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setVersion(v => v + 1)
    }, 1200)
    return () => clearInterval(timer)
  }, [])

  const barConfig = useMemo(() => {
    return {
      type: 'bar',
      data: {
        labels,
        datasets: [
          {
            label: '销量',
            data: randomData(),
            backgroundColor: '#3b82f6'
          }
        ]
      },
      options: {
        ...commonOptions,
        scales: {
          y: { beginAtZero: true }
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [version])

  const horizontalBarConfig = useMemo(() => {
    return {
      type: 'bar',
      data: {
        labels,
        datasets: [
          {
            label: '对比',
            data: randomData(),
            backgroundColor: '#10b981'
          }
        ]
      },
      options: {
        ...commonOptions,
        indexAxis: 'y',
        scales: {
          x: { beginAtZero: true }
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [version])

  const lineConfig = useMemo(() => {
    return {
      type: 'line',
      data: {
        labels,
        datasets: [
          {
            label: '访问量',
            data: randomData(),
            borderColor: '#10b981',
            backgroundColor: 'rgba(16,185,129,0.2)',
            tension: 0.35,
            fill: true,
            pointRadius: 2
          }
        ]
      },
      options: {
        ...commonOptions,
        scales: {
          y: { beginAtZero: true }
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [version])

  const mixedConfig = useMemo(() => {
    const data1 = randomData()
    const data2 = randomData()
    return {
      type: 'bar',
      data: {
        labels,
        datasets: [
          {
            type: 'bar',
            label: '销量',
            data: data1,
            backgroundColor: 'rgba(59,130,246,0.7)'
          },
          {
            type: 'line',
            label: '趋势',
            data: data2,
            borderColor: '#ef4444',
            tension: 0.35,
            pointRadius: 2
          }
        ]
      },
      options: {
        ...commonOptions,
        scales: {
          y: { beginAtZero: true }
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [version])

  const pieConfig = useMemo(() => {
    const values = pieLabels.map(() => randomInt(10, 100))
    return {
      type: 'pie',
      data: {
        labels: pieLabels,
        datasets: [
          {
            data: values,
            backgroundColor: sliceColors(pieLabels.length),
            borderWidth: 0
          }
        ]
      },
      options: {
        ...commonOptions
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [version])
}
```

--------------------------------

### Module Changelog Example

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/app/directory.md

Example of a module's changelog file, used for publishing module updates and displaying version history.

```json md
# 1.0.51
## 初步兼容支付宝、抖音小程序
- 更新cli兼容支付宝、抖音
- 修改Header组件兼容
- 修改Layout组件兼容
- 修改全局样式兼容

## getLocationBase
将RN端的方法移动到RN端模块

## 全局样式
修复错误的全局样式

# V2023-12-02
## 发布说明

- 发布首个版本

```

--------------------------------

### Dynamic Theme Switching Example

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2025-08-05 theme.md

This example demonstrates how to manually switch themes in小程序 H5 and web platforms. It uses the `theme.useMode` and `theme.useModes` hooks from the Duxapp `theme` module to display available themes and handle user clicks for switching.

```jsx
import { Header, ScrollView, TopView, GroupList, theme, Button } from '@/duxuiExample'

export default function ThemeExample() {

  const mode = theme.useMode(true)

  const modes = theme.useModes()

  return <TopView>
    <Header title='Theme' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='主题切换功能' desc='主题切换当前仅支持小程序和H5端，其他端还在努力开发中'
          className='gap-3'
        >
          {
            modes.map(item => <Button
              type='primary'
              plain={item.mode !== mode}
              key={item.name}
              onClick={() => item.switch()}
              size='l'
            >{item.name}</Button>)
          }
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}
```

--------------------------------

### Run the HarmonyOS Development Server

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2024-11-24-harmony1.md

After creating the project, execute this command to start the development server for HarmonyOS. This command compiles the project for the specified app.

```bash
yarn dev:harmony --app=duxuiExample
```

--------------------------------

### Start Application with Inline Login Component

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/user/start.md

Provides an alternative method to start the application with a forced login, by directly passing the `UserLogin` component implementation to the `start` method. This ensures the login component is available when needed.

```jsx
import { user, UserLogin } from '@/duxappUser'

UserLogin.start(({ onLogin }) => {
  // 在用户登录成功后执行，type是登录方式 data是用户信息
  const login = () => {
    onLogin({
      type: 'account',
      data: { ... 用户信息 }
    })
  }

  // 这不是一个页面里面不要使用TopView组件
  return <Column></Column>
})
```

--------------------------------

### ECharts Chart Examples

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/echarts/start.md

Demonstrates various ECharts chart types including Line, Bar, Scatter, Pie, and Donut charts. Includes setup for data generation, chart options, and dynamic updates.

```jsx
import { Chart } from '@/duxappEcharts'
import { Header, ScrollView, TopView, GroupList, px } from '@/duxuiExample'
import { useEffect, useMemo, useState } from 'react'

import {
  PieChart,
  LineChart,
  BarChart,
  ScatterChart
} from 'echarts/charts'

import {
  TooltipComponent,
  GridComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components'

const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const palette = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452']

const rand = (min, max) => Math.round(min + Math.random() * (max - min))
const randomArray = (count, min, max) => Array.from({ length: count }, () => rand(min, max))
const randomPie = (labels) => labels.map(name => ({ name, value: rand(120, 1200) }))
const randomScatter = (count) => Array.from({ length: count }, () => [rand(0, 100), rand(0, 100)])

const createData = () => ({
  line: randomArray(categories.length, 120, 280),
  area: randomArray(categories.length, 80, 220),
  bar: randomArray(categories.length, 60, 200),
  stackA: randomArray(categories.length, 30, 120),
  stackB: randomArray(categories.length, 20, 100),
  pie: randomPie(['Search', 'Direct', 'Email', 'Union', 'Video']),
  donut: randomPie(['Chrome', 'Safari', 'Edge', 'Firefox']),
  scatter: randomScatter(20)
})

export default function CellExample() {
  const [data, setData] = useState(() => createData())
  const chartHeight = px(400)

  useEffect(() => {
    const timer = setInterval(() => {
      setData(createData())
    }, 1500)
    return () => clearInterval(timer)
  }, [])

  const options = useMemo(() => {
    const compactGrid = {
      top: 24,
      right: 16,
      bottom: 24,
      left: 16,
      containLabel: true
    }
    return {
      line: {
        color: [palette[0]],
        grid: compactGrid,
        xAxis: {
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.line,
            type: 'line',
            smooth: true,
            lineStyle: { color: palette[0] },
            itemStyle: { color: palette[0] }
          }
        ]
      },
      bar: {
        color: [palette[2]],
        grid: compactGrid,
        xAxis: {
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.bar,
            type: 'bar',
            itemStyle: { color: palette[2] }
          }
        ]
      },
      scatter: {
        color: [palette[5]],
        grid: compactGrid,
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'scatter',
            data: data.scatter,
            itemStyle: { color: palette[5] }
          }
        ]
      },
      pie: {
        color: palette,
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center',
          top: 4
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 4,
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '65%',
            center: ['50%', '58%'],
            data: data.pie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      donut: {
        color: palette,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 4,
          left: 'center'
        },
        series: [
          {
            name: 'Browsers',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', '58%'],
            avoidLabelOverlap: false,
            data: data.donut,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
              }
            }
          }
        ]
      }
    }
  }, [data])

  return (
    <TopView>
      <Header title="Chart" />
      <ScrollView>
        <GroupList title="LineChart">
          <Chart option={options.line} height={chartHeight} />
        </GroupList>
        <GroupList title="BarChart">
          <Chart option={options.bar} height={chartHeight} />
        </GroupList>
        <GroupList title="ScatterChart">
          <Chart option={options.scatter} height={chartHeight} />
        </GroupList>
        <GroupList title="PieChart">
          <Chart option={options.pie} height={chartHeight} />
        </GroupList>
        <GroupList title="DonutChart">
          <Chart option={options.donut} height={chartHeight} />
        </GroupList>
      </ScrollView>
    </TopView>
  )
}
```

--------------------------------

### Create a Duxapp Project for HarmonyOS

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2024-11-24-harmony1.md

Use this command to initialize a new Duxapp project with UI components for HarmonyOS. Ensure Node.js 20+ and Yarn are installed.

```bash
npx duxapp-cli create projectExample duxuiExample
```

--------------------------------

### Install ECharts Plugin

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/echarts/start.md

Install the ECharts plugin using Yarn.

```bash
yarn duxapp app add duxappEcharts
```

--------------------------------

### Module Configuration Example (duxuiExample)

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/app/intro.md

This JSON configuration defines the 'duxuiExample' module, its description, version, and its direct dependencies on other modules. Note that 'duxapp' is not listed here but is included due to its dependency on 'duxui'.

```json
{
  "name": "duxuiExample",
  "description": "ui库示例",
  "version": "1.0.10",
  "dependencies": [
    "duxui",
    "duxcms",
    "amap",
    "echarts",
    "wechat"
  ]
}
```

--------------------------------

### Example: DuxUI Components in a React Component

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/started/duxui.md

This example demonstrates how to import and use various DuxUI components, along with custom hooks and utility functions, within a React component for a sales promotion center.

```jsx
import { Avatar, Card, ScrollView, Column, Divider, Header, Text, TopView, Row, px, Image, nav, Tag } from '@/duxui'
import { useRequest, CmsIcon, saleHook, Qrcode } from '@/duxcmsSale'
import { setClipboardData } from '@tarojs/taro'

export default function Sale() {

  const [{ info = {}, day = {}, money, total = {} }] = useRequest('sale/index')

  return <TopView>
    <Header absolute title='推广中心' color='#FFFFFF' style={{ backgroundColor: 'transparent' }} />
    <Image style={{ height: px(396) }} className='w-full absolute' src={require('./images/tui_bag.png')} />
    <Row justify='between' items='center' style={{ marginTop: px(208) }} className='mt-3 ph-3'>
      <Row items='center' justify='start'>
        <Avatar url={info.avatar}>{info.nickname}</Avatar>
        <Column className='mh-3'>
          <Row items='center' className='gap-2'>
            <Text size={33} bold color='#FFFFFF' >{info.nickname}</Text>
            {!!info.level_name && <Tag type='primary' size='s'>{info.level_name}</Tag>}
          </Row>
          <Row className='mt-2'>
            <Text color='#FFFFFF' size={1}>邀请码：{info.code}</Text>
            <CmsIcon className='mh-2' size={36} name='copy' color='#FFFFFF' onClick={() => setClipboardData({ data: info.code }) } />
          </Row>
        </Column>
      </Row>
      <CmsIcon size={60} name='QRcode1' color='#FFFFFF' onClick={Qrcode.show} />
    </Row>
    <ScrollView className='mt-3'>
      <Card margin disableMarginTop>
        <Row jtems='center' justify='between' className='gap-3'>
          <Column justify='center' items='center' grow >
            <Text bold type='primary'>{total.order_num || 0}</Text>
            <Text color={2} size={2} className='mt-2'>直推订单</Text>
          </Column>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.user_num || 0}</Text>
            <Text color={2} size={2} className='mt-2'>直推客户</Text>
          </Column>
        </Row>
        <Row className='mt-2' jtems='center' justify='between'>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.month_sale_money || 0}</Text>
            <Text color={2} size={2} className='mt-2'>本月收益</Text>
          </Column>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.sale_money || 0}</Text>
            <Text color={2} size={2} className='mt-2'>累计收益</Text>
          </Column>
        </Row>
      </Card>
      <Card shadow margin disableMarginTop onClick={() => nav('duxcmsAccount/cash/index')}>
        <Row items='center' justify='between'>
          <Text bold>佣金管理</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <Row className='mt-3' items='baseline'>
          <Text size={2}>可提现佣金:</Text>
          <Text className='mh-3' bold size={50}>{money || 0}</Text>
        </Row>
      </Card>
      <Card margin disableMarginTop>
        <Row items='center' justify='around'>
          <Column items='center'>
            <Text size={2}>今日预估收益</Text>
            <Text className='mt-1' bold size={40} >{day.sale_money || 0}</Text>
          </Column>
          <Column items='center'>
            <Text size={2}>今日有效订单</Text>
            <Text className='mt-1' bold size={40} >{day.order_num || 0}</Text>
          </Column>
          <Column items='center'>
            <Text size={2}>今日新增客户</Text>
            <Text className='mt-1' bold size={40} >{day.user_num || 0}</Text>
          </Column>
        </Row>
      </Card>

      <Card margin className='gap-4'>
        <Text size={4} bold>其他操作</Text>
        <Row justify='between' items='center' onClick={() => nav('duxcmsSale/index/order')}> 
          <Text size={2} className='mh-2' bold>推广订单</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <Row justify='between' items='center' onClick={() => nav('duxcmsSale/index/customer')} >
          <Text size={2} className='mh-2' bold>我的客户</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <saleHook.Render mark='index.menus' />
      </Card>
      <Row style={{ height: px(16) }}></Row>
    </ScrollView >
  </TopView>
}
```

--------------------------------

### Install Duxapp Design Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/design/start.md

Install the core Duxapp Design module using Yarn. This module requires the Duxapp framework.

```bash
yarn duxapp app add duxappDesign
```

--------------------------------

### New Version Dynamic Theme Configuration

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2025-08-05 theme.md

Example of configuring multiple themes (light and dark) and theme-related settings in the user configuration for dynamic switching.

```javascript
const config = {
  option: {
    // 基础模块
    duxapp: {
      themeConfig: {
        themes: {
          light: {
            name: '明亮主题',
            color: '#fff'
          },
          dark: {
            name: '暗黑主题',
            color: '#333'
          }
        },
        // dark: 'dark',
        // light: 'light',
        // default: 'light'
      },
      themes: {
        light: {
          primaryColor: '#E70012',
          secondaryColor: '#0092e8',
          successColor: '#34a853',
          warningColor: '#fbbc05',
          dangerColor: '#ea4335',
          pageColor: '#F7F9FC',

          textColor1: '#373D52',
          textColor2: '#73778E',
          textColor3: '#A1A6B6',
          textColor4: '#FFF',
          header: {
            color: '#fff', // 仅支持rgb hex值，请勿使用纯单词 设置为数组将显示一个渐变按钮
            textColor: '#000', // 文本颜色
            showWechat: true, // 微信公众号是否显示header
            showWap: true, // h5是否显示header
          }
        },
        dark: {
          pageColor: '#1E1E1E',

          whiteColor: '#181818',
          blackColor: '#fff',
          lineColor: '#1F1F1F',

          textColor1: '#FFF',
          textColor2: '#A1A6B6',
          textColor3: '#73778E',
          textColor4: '#373D52',
          header: {
            color: '#121212',
            textColor: '#fff'
          },
          loading: {
            dark: '#fff',
            blank: '#7a7a7a'
          }
        }
      }
    },
    duxui: {
      themes: {
        light: {
          button: {
            radiusType: 'round'
          }
        },
        dark: {
          tabBar: {
            nameColor: '#888',
            nameHoverColor: '#fff'
          }
        }
      }
    }
  }
}

export default config
```

--------------------------------

### Running Duxapp Module for Mini Program

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/other/taro-migrate.md

Starts the development server for a Duxapp module targeting mini programs. Use the `--app` flag to specify the module name.

```bash
yarn dev:weapp --app=myproject
```

--------------------------------

### Running Duxapp Module for H5

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/other/taro-migrate.md

Starts the development server for a Duxapp module targeting H5. Use the `--app` flag to specify the module name.

```bash
yarn dev:h5 --app=myproject
```

--------------------------------

### Module Configuration Example (duxui)

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/app/intro.md

This JSON configuration defines the 'duxui' module, its description, version, and its direct dependency on the 'duxapp' module. This dependency chain is crucial for understanding how modules are included in the final build.

```json
{
  "name": "duxui",
  "description": "DUXUI库",
  "version": "1.0.39",
  "dependencies": [
    "duxapp"
  ]
}
```

--------------------------------

### Install DuxApp Chart.js

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/duxappChartJs/start.md

Use this command to add the Chart.js integration package to your DuxApp project.

```bash
yarn duxapp app add duxappChartJs
```

--------------------------------

### Install DuxApp User Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/user/start.md

Install the DuxApp User module using yarn. This command adds the necessary package to your project.

```bash
yarn duxapp app add duxappUser
```

--------------------------------

### PickerDate Examples

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/form/PickerDate.md

Demonstrates various modes of the PickerDate component, including date, year, month, datetime, and time selection.

```jsx
import { Header, ScrollView, TopView, Form, FormItem, Card, Divider, DividerGroup, PickerDate } from '@/duxuiExample'

export default function DateExample() {
  return <TopView>
    <Header title='Date' />
    <Form onSubmit={console.log}>
      <ScrollView>
        <Card margin verticalPadding={false}>
          <DividerGroup>
            <FormItem label='日期' field='date'>
              <PickerDate title='日期' placeholder='请选择日期' grow />
            </FormItem>
            <FormItem label='年' field='year'>
              <PickerDate title='年' placeholder='请选择年' grow mode='year' />
            </FormItem>
            <FormItem label='月' field='month'>
              <PickerDate title='月' placeholder='请选择月' grow mode='month' />
            </FormItem>
            <FormItem label='日期时间' field='datetime'>
              <PickerDate title='日期时间' placeholder='请选择日期时间' grow mode='datetime' />
            </FormItem>
            <FormItem label='时间' field='time'>
              <PickerDate title='时间' placeholder='请选择时间' grow mode='time' />
            </FormItem>
          </DividerGroup>
        </Card>
      </ScrollView>
    </Form>
  </TopView>
}
```

--------------------------------

### Basic Page Structure with TopView.page

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/started/page.md

This example demonstrates the recommended page structure using TopView.page for integrating Duxapp features. Ensure TopView is the root component for functionalities like WeChat sharing.

```jsx
import { View } from '@tarojs/components'
import { Header, ScrollView, TopView } from '@/duxapp'

import './index.scss'

export default TopView.page(function Page() {

  return <>
    <Header title='duxapp' titleCenter />
    <ScrollView>
      <View className='duxapp-demo__title'>欢迎使用duxapp</View>
      <View className='duxapp-demo__p'>添加模块: yarn duxapp app add app名称</View>
      <View className='duxapp-demo__p'>创建模块: yarn duxapp app create app名称</View>
    </ScrollView>
  </>
})
```

--------------------------------

### Old Version Static Theme Configuration

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2025-08-05 theme.md

Example of configuring static theme parameters in `configs/config/index.js`. These parameters are converted to SCSS variables for global use.

```javascript
option: {
  // 基础模块
  duxapp: {
    theme: {
      primaryColor: '#CDDE00',
      secondaryColor: '#FDD000',
      successColor: '#34a853',
      warningColor: '#fbbc05',
      dangerColor: '#ea4335',
      pageColor: '#fafbf8'
    }
  }
}
```

--------------------------------

### Install duxui Module in duxapp

Source: https://github.com/duxapp/duxapp-doc/blob/master/blog/2024-09-26-duxui/index.md

Install the duxui module using yarn if it's not already present in your duxapp project. Refer to the duxapp framework documentation for more details.

```bash
yarn duxapp app add duxui
```

--------------------------------

### Install DuxApp React Native Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/duxappReactNative/start.md

Use this command to add the duxappReactNative module to your project via Yarn.

```bash
yarn duxapp app add duxappReactNative
```

--------------------------------

### Basic Form with Validation and Submission

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/form/Form.md

This snippet demonstrates a typical form setup with input fields, date and select pickers, and a textarea. It includes default values, validation rules, and handles form submission and reset. Use this for standard form creation.

```jsx
import { Header, ScrollView, TopView, Form, Card, Input, PickerDate, PickerSelect, Textarea, Row, DividerGroup, FormItem, FormSubmit, FormReset, confirm, route } from '@/duxuiExample'

// 默认值支持多种形式 会直接定义值 函数返回值 异步函数返回值
const defaultValues = async () => {
  return {
    text: '这是默认值'
  }
}

const rules = {
  text: [
    {
      required: true,
      type: 'string',
      message: '输入框为必填字段'
    }
  ],
  desc: [
    {
      required: true,
      type: 'string',
      message: '介绍为必填字段'
    }
  ]
}

export default function FormExample() {

  const submit = async data => {
    console.log(data)
    await confirm({
      title: '提交成功',
      content: '表单缓存将被清除，再次进入表单需要重新填写'
    })
    route.back()
    return true
  }

  return <TopView>
    <Header title='Form' />
    <Form cache='duxui-form' onSubmit={submit} defaultValues={defaultValues}>
      <ScrollView>
        <Card margin verticalPadding={false}>
          <DividerGroup>
            <FormItem label='输入框' name='text' rules={rules.text}>
              <Input placeholder='请输入' align='right' grow />
            </FormItem>
            <FormItem label='介绍的输入' name='desc' desc='输入框介绍，这是输入框介绍' rules={rules.desc}>
              <Input placeholder='请输入' />
            </FormItem>
            <FormItem label='日期' name='date'>
              <PickerDate title='日期' placeholder='请选择日期' grow />
            </FormItem>
            <FormItem label='选择' name='sex'>
              <PickerSelect title='选择' placeholder='请选择性别' range={['男', '女']} grow />
            </FormItem>
            <FormItem label='介绍' name='info' direction='vertical' >
              <Textarea placeholder='请输入介绍' maxlength={100} />
            </FormItem>
          </DividerGroup>
        </Card>
        <Row className='p-3 gap-3'>
          <FormReset className='flex-grow'>重置</FormReset>
          <FormSubmit className='flex-grow' type='primary'>提交</FormSubmit>
        </Row>
      </ScrollView>
    </Form>
  </TopView>
}
```

--------------------------------

### Install Expo Gaode Map Module

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/amap/start.md

Install the expo-gaode-map module using Yarn. This command adds the necessary package to your Duxapp project.

```bash
yarn duxapp app add expo-gaode-map
```

--------------------------------

### Start Application with Forced Login

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/user/start.md

Initiates the application startup process, ensuring the user is logged in before proceeding. This is useful for apps where all functionality requires authentication.

```jsx
import { user, UserLogin } from '@/duxappUser'

// 请先执行 register 注册后在执行Start
user.register(...)

UserLogin.start()
```

--------------------------------

### Component-Specific Theme Configuration Example

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/app/theme.md

Customize theme settings for specific components, such as the Header. These settings can include colors, visibility toggles, and other component-specific properties.

```js
export default {
  // ...其他
  header: {
    color: '#fff', // 仅支持rgb hex值，请勿使用纯单词 设置为数组将显示一个渐变按钮
    textColor: '#000', // 文本颜色
    showWechat: false, // 微信公众号是否显示header
    showWap: true, // h5是否显示header
  }
}
```

--------------------------------

### Get User Information with Hook

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/app/user/start.md

Utilizes a hook to retrieve user information and login status. Also shows how to get the user ID and fetch user details.

```jsx
// hook获取用户信息 第一个用户信息，第二个登录状态
const [userInfo, loginStatus] = user.useUserInfo()

// 获取用户id
const id = user.getUserID()

// 获取用户信息
const userInfo = user.getUserInfo()
```

--------------------------------

### Calendar Component Examples

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/form/Calendar.md

Demonstrates various configurations of the DuxUI Calendar component, including different selection modes (day, week, scope), multi-selection, limiting to the current week, and setting min/max dates. It also shows how to handle month change and day click events.

```jsx
import { Header, ScrollView, TopView, GroupList } from '@/duxuiExample'
import { Calendar, Checkbox, dayjs, Radio, RadioGroup, Row, Text, toast } from '@/duxui'
import { useMemo, useState } from 'react'

export default function ButtonExample() {

  const [mode, setMode] = useState()

  const [checkbox, setCheckbox] = useState(false)

  const [onlyCurrentWeek, setOnlyCurrentWeek] = useState(false)

  const [maxmin, setMaxmin] = useState(false)

  const customDate = useMemo(() => {
    return [
      {
        date: [dayjs().format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='primary' {...select ? { color: 4 } : {}}>今天</Text>,
        top: ({ select }) => <Text size={1} color={select ? 4 : 1}>顶部</Text>
      },
      {
        date: [dayjs().add(-1, 'day').format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='secondary' {...select ? { color: 4 } : {}}>昨天</Text>
      },
      {
        date: [dayjs().add(1, 'day').format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='secondary' {...select ? { color: 4 } : {}}>明天</Text>
      }
    ]
  }, [])

  const customSelect = useMemo(() => {
    return {
      top: ({ select, selectType }) => {
        if (selectType === 'start') {
          return <Text size={1} color={4}>开始</Text>
        } else if (selectType === 'end') {
          return <Text size={1} color={4}>结束</Text>
        } else if (selectType === 'select') {
          return <Text size={1} color={4}>选中</Text>
        }
      }
    }
  }, [])

  return <TopView>
    <Header title='Calendar' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='天选择'>
          <RadioGroup value={mode} onChange={setMode}>
            <Radio value={undefined} label='不选择' />
            <Radio value='day' label='天选择' />
            <Radio value='scope' label='范围选择' />
            <Radio value='week' label='周选择' />
          </RadioGroup>
          <Row className='gap-3 items-center'>
            <Checkbox label='多选' checked={checkbox} onClick={() => setCheckbox(!checkbox)} />
            <Checkbox label='仅显示当前周' checked={onlyCurrentWeek} onClick={() => setOnlyCurrentWeek(!onlyCurrentWeek)} />
            <Checkbox label='限制最大最小日期' checked={maxmin} onClick={() => setMaxmin(!maxmin)} />
          </Row>
          <Calendar mode={mode}
            key={mode + '' + checkbox}
            checkbox={checkbox}
            onlyCurrentWeek={onlyCurrentWeek}
            {
            ...maxmin ? {
              min: dayjs().format('YYYY-MM-DD'),
              max: dayjs().add(15, 'day').format('YYYY-MM-DD'),
            } : {}
            }
          />
        </GroupList.Item>
        <GroupList.Item title='事件'>
          <Calendar
            mode='day'
            onMonthChange={e => toast('onMonthChange:' + e)}
            onDayClick={e => toast('onDayClick:' + e.day)}
          />
        </GroupList.Item>
        <GroupList.Item title='自定义日历'>
          <Calendar
            mode='scope'
            customDate={customDate}
            customSelect={customSelect}
          />
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}
```

--------------------------------

### ProgressCircle Examples

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/duxui/show/ProgressCircle.md

Demonstrates various ways to use the ProgressCircle component, including basic usage, color and gradient options, size adjustments, stroke linecap, loading states, and dynamic value updates.

```jsx
import { Header, ScrollView, TopView, GroupList, ProgressCircle, duxappTheme, Row, Text, Button, colorLighten } from '@/duxuiExample'
import { useState } from 'react'

export default TopView.page(function ProgressCircleExample() {

  const [val, setVal] = useState(30)

  return <>
    <Header title='ProgressCircle' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='基础用法'>
          <Row items='center' className='gap-3'>
            <ProgressCircle value={30} />
            <ProgressCircle value={40} clockwise={false} />
          </Row>
        </GroupList.Item>
        <GroupList.Item title='颜色和渐变'>
          <Row items='center' className='gap-3'>
            <ProgressCircle value={30} color={duxappTheme.successColor} />
            <ProgressCircle value={100}
              color={{
                '0%': duxappTheme.primaryColor,
                '100%': colorLighten(duxappTheme.primaryColor, 0.5)
              }}
            />
          </Row>
        </GroupList.Item>
        <GroupList.Item title='尺寸'>
          <Row items='center' className='gap-3'>
            <ProgressCircle value={30} size={100} />
            <ProgressCircle value={30} size={180} strokeWidth={30} />
            <ProgressCircle value={30} size={260} strokeWidth={40} />
          </Row>
        </GroupList.Item>
        <GroupList.Item title='进度条圆角'>
          <Row items='center' className='gap-3'>
            <ProgressCircle value={50} />
            <ProgressCircle value={50} strokeLinecap='square' />
          </Row>
        </GroupList.Item>
        <GroupList.Item title='加载中'>
          <Row items='center' className='gap-3'>
            <ProgressCircle loading />
            <ProgressCircle value={30} loading />
          </Row>
        </GroupList.Item>
        <GroupList.Item title='子元素'>
          <ProgressCircle value={30}>
            <Text size={7}>30%</Text>
          </ProgressCircle>
        </GroupList.Item>
        <GroupList.Item title='动态变更'>
          <ProgressCircle value={val}>
            <Text size={7}>{val}%</Text>
          </ProgressCircle>
          <Row className='gap-3'>
            <Button type='primary' onClick={() => setVal(Math.max(val - 10, 0))}>减少</Button>
            <Button type='primary' onClick={() => setVal(Math.min(val + 10, 100))}>增加</Button>
          </Row>
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </>
})
```

--------------------------------

### Defining a User Management Class with ObjectManage

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/started/globalState.md

Extend ObjectManage to create a robust global state manager for user information. This example includes constructor options for caching and default data structure.

```js
import { ObjectManage } from '@/duxapp'

class UserManage extends ObjectManage {
  
  constructor() {
    super({
      cacheKey: 'userInfo',
      cache: true
    })
  }

  data = {
    // 登录状态
    status: false,
    // ...其他模块的用户信息
  }
}

/**
 * 实例化这个用户管理对象并且导出
 */
export const user = new UserManage()
```

--------------------------------

### Basic Request and Upload Usage

Source: https://github.com/duxapp/duxapp-doc/blob/master/docs/course/started/net.md

Demonstrates how to import and use the exported request and upload functions for making GET, POST, and file upload requests with different configurations.

```javascript
import { request, upload } from '@/modeName'

// get request
const res = await request('mall/list')

// post request
const res = await request({
  url: 'mall/list',
  method: 'POST'
})

// Upload a single image
const [url] = await upload('image', { count: 1 })

// Upload multiple images
const urls = await upload('image', { count: 9 })

// Upload video
const [url] = await upload('video', { count: 1 })
```