### @kqinfo/ui Installation and Babel Setup

Source: https://context7.com/ryozm/kqdoc/llms.txt

Installs the '@kqinfo/ui' library and configures Babel for on-demand component loading. This setup optimizes performance by only loading components when they are used. Includes installation commands and a babel configuration example.

```bash
# Install the UI library
yarn add @kqinfo/ui

# Install babel plugin for on-demand loading
yarn add babel-plugin-import -D
```

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

### Create Parsec-Admin Application with kqinfo-app

Source: https://context7.com/ryozm/kqdoc/llms.txt

Bootstrap a new admin application using the 'kqinfo-app' scaffolding tool. This involves creating a new project directory, selecting 'Admin' as the project type, and then starting the application for preview.

```bash
# Create a new application in my-app directory
yarn create kqinfo-app my-app

# Select Admin as project type
> Admin

# Preview the project
cd my-app && yarn start
```

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

### ConfigProvider Setup for @kqinfo/ui in React App

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates how to wrap the application's root component with '@kqinfo/ui's ConfigProvider. This allows for global configuration of theme colors, such as brand colors, which can affect the appearance of all UI components.

```tsx
// app.tsx
import { ConfigProvider } from '@kqinfo/ui';

const App = (props) => {
  return (
    <ConfigProvider brandAttract={'#ff9d46'} brandPrimary={'#2780d9'}>
      {props.children}
    </ConfigProvider>
  );
};

```

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

### Synchronous Storage Utilities

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

A set of utilities for interacting with local storage synchronously. This includes getting, setting, removing, and clearing key-value pairs. These operations are immediate and do not involve callbacks or promises.

```javascript
import {
  getStorageSync,
  setStorageSync,
  removeStorageSync,
  clearStorageSync,
} from "../utils/one/get-storage-sync";

// Example Usage:
// Set data
setStorageSync('userToken', 'abc123xyz');

// Get data
const token = getStorageSync('userToken');
console.log('User Token:', token);

// Remove data
removeStorageSync('userToken');

// Clear all data
// clearStorageSync();
```

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

### @kqinfo/ui Babel Configuration for On-Demand Loading

Source: https://context7.com/ryozm/kqdoc/llms.txt

Configures the Babel build process to enable on-demand loading for '@kqinfo/ui' components. This is achieved by adding the 'babel-plugin-import' plugin to the Babel configuration file.

```javascript
// babel.config.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryDirectory: 'es',
        libraryName: '@kqinfo/ui'
      },
      '@kqinfo/ui'
    ]
  ]
};

```

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

### Get Platform Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Retrieves the name or type of the platform the application is running on (e.g., 'ios', 'android', 'web'). This is valuable for platform-specific adjustments or logic. It returns a string indicating the platform.

```javascript
import { getPlatform } from "../utils/business/get-platform";

// Example Usage:
const platformName = getPlatform();
console.log("Running on platform:", platformName);
```

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

### Get App Version Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Retrieves the current version of the application. This is useful for display purposes, analytics, or for implementing version-specific logic. It returns the application's version number as a string.

```javascript
import { getVersion } from "../utils/business/get-version";

// Example Usage:
const appVersion = getVersion();
console.log("Application Version:", appVersion);
```

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

### Button Component Variants (React/TSX)

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates the various types, sizes, and states available for the Button component from '@kqinfo/ui'. This includes primary, attract, ghost, and shadow variants, as well as different size options like 'tiny', 'small', 'normal', and 'action'. The example also shows loading, disabled, and icon-enabled states, along with button grouping.

```tsx
import { Button, Space } from '@kqinfo/ui';

export default () => (
  <Space vertical size={'10px'}>
    {/* Button types */}
    <Space size={'10px'}>
      <Button>Default</Button>
      <Button type={'primary'}>Primary</Button>
      <Button type={'attract'}>Attract</Button>
    </Space>

    {/* Ghost buttons */}
    <Space size={'10px'}>
      <Button ghost>Default Ghost</Button>
      <Button type={'primary'} ghost>Primary Ghost</Button>
      <Button type={'attract'} ghost>Attract Ghost</Button>
    </Space>

    {/* Shadow buttons */}
    <Space size={'10px'}>
      <Button shadow>Default Shadow</Button>
      <Button type={'primary'} shadow>Primary Shadow</Button>
      <Button type={'attract'} shadow>Attract Shadow</Button>
    </Space>

    {/* Button sizes */}
    <Space size={'10px'}>
      <Button size={'tiny'} block={false}>Tiny</Button>
      <Button size={'small'} block={false}>Small</Button>
      <Button size={'normal'} block={false}>Normal</Button>
      <Button size={'action'} block={false}>Action</Button>
    </Space>

    {/* Button states */}
    <Space size={'10px'}>
      <Button loading type={'primary'}>Loading</Button>
      <Button disabled>Disabled</Button>
      <Button icon={<Icon name="kq-sousuo" />}>With Icon</Button>
    </Space>

    {/* Button group */}
    <Button.Group>
      <Button type={'primary'} size={'small'}>Submit</Button>
      <Button type={'attract'} size={'small'}>Cancel</Button>
    </Button.Group>

    {/* Round button group */}
    <Button.Group round>
      <Button type={'primary'} size={'small'}>Submit</Button>
      <Button type={'attract'} size={'small'}>Cancel</Button>
    </Button.Group>
  </Space>
);

```

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

### Show Custom Confirm Modal with Button Text/Color (React/TSX)

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates customizing the confirmation button's text and color within a modal. This example shows how to change 'OK' to 'Send' and set its color to a specific blue. It also hides the cancel button using `showCancel: false`. This is useful for creating modals that fit specific branding or user flow requirements.

```tsx
import { Modal, Button } from '@kqinfo/ui';

      <Button
        type={'primary'}
        onTap={() =>
          Modal.show({
            title: 'Send',
            content: 'Confirm sending?',
            okText: 'Send',
            okTextColor: '#165DFF',
            showCancel: false,
          })
        }
      >
        Custom Confirm Button
      </Button>
```

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

### Show Basic Modal with Form (React/TSX)

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates how to display a modal with a form for email input. The modal requires validation before confirmation. It uses hooks from 'react' and components from '@kqinfo/ui'. The `onOk` function handles form submission and validation, returning a Promise to manage the modal's state.

```tsx
import { Modal, Button, Form, FormItem, ReInput, showToast, rpxToPx } from '@kqinfo/ui';

export default () => {
  const [form] = Form.useForm();

  return (
    <>
      <Modal />

      {/* Basic modal with form */}
      <Button
        type={'primary'}
        onTap={() =>
          Modal.show({
            title: 'Send Report to Email',
            onOk: () =>
              new Promise((resolve, reject) => {
                form.submit();
                form
                  .validateFields()
                  .then(values => {
                    console.log('Form values:', values);
                    resolve('ok');
                  })
                  .catch(reject);
              }),
            content: (
              <Form form={form} style={{ width: '100%' }}>
                <FormItem
                  noStyle
                  name={'email'}
                  rules={[
                    { type: 'email', message: 'Please enter a valid email' },
                    { required: true, message: 'Email is required' },
                  ]}>
                  <ReInput
                    style={{
                      background: '#F1F1F1',
                      borderRadius: rpxToPx(20),
                      height: rpxToPx(90),
                      width: '100%',
                      boxSizing: 'border-box',
                      padding: `0 ${rpxToPx(31)}px`,
                    }}
                    placeholder={'Enter email address'}
                  />
                </FormItem>
              </Form>
            ),
          })
            .then(() => showToast({ title: 'Confirmed' }))
            .catch(() => showToast({ title: 'Cancelled' }))
        }
      >
        Show Modal
      </Button>
    </>
  );
};
```

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

### Space Component: Flexible Layout with @kqinfo/ui

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates the Space component for creating flexible layouts with horizontal and vertical spacing between elements. It supports various props for controlling size, alignment, and distribution, along with a grid layout option using `ignoreNum` and `flexWrap`.

```tsx
import { Space, Button } from '@kqinfo/ui';

export default () => (
  <Space vertical size={'10px'}>
    {/* Horizontal spacing */}
    <Space size={'10px'}>
      <Button block={false}>Button 1</Button>
      <Button>Button 2</Button>
      <Button type={'primary'}>Button 3</Button>
    </Space>

    {/* Vertical spacing */}
    <Space vertical size={'10px'} alignItems={'flex-start'}>
      <Button block={false}>Button 1</Button>
      <Button>Button 2</Button>
      <Button type={'primary'}>Button 3</Button>
    </Space>

    {/* Alignment and distribution */}
    <Space
      size={'10px'}
      alignItems={'center'}
      justify={'space-between'}
      style={{ background: '#fff' }}
    >
      <Button block={false}>A</Button>
      <Button block={false}>B</Button>
      <Button block={false}>C</Button>
    </Space>

    {/* Grid layout */}
    <Space ignoreNum={4} flexWrap={'wrap'} size={'14px'}>
      {new Array(6).fill(0).map((_, i) => (
        <Space
          key={i}
          vertical
          style={{ width: '21%' }}
          size={'10px'}
          alignItems={'center'}
        >
          <div style={{ width: '100%', height: '50px', background: '#eee' }} />
          <div style={{ width: '100%', height: '10px', background: '#eee' }} />
        </Space>
      ))}
    </Space>
  </Space>
);
```

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

### List Component: Infinite Scroll with @kqinfo/ui

Source: https://context7.com/ryozm/kqdoc/llms.txt

Showcases the List component for creating an infinite scrollable list with automatic pagination, error retry, and virtual scrolling. It integrates with a search input and provides customization for loading states, no data messages, and item rendering.

```tsx
import React, { useCallback, useState, useRef } from 'react';
import { Space, List, Search, Button } from '@kqinfo/ui';

export default () => {
  const [search, setSearch] = useState();
  const listRef = useRef<{ 
    refreshList: (retainList?: boolean) => Promise<void>; 
  }>(null);

  return (
    <Space vertical size={'10px'}>
      <Space size={'10px'}>
        <Button onTap={() => listRef.current?.refreshList()}>
          Full Refresh
        </Button>
        <Button onTap={() => listRef.current?.refreshList(true)}>
          Refresh with Current List
        </Button>
      </Space>

      <Search showBtn onConfirm={v => setSearch(v)} />

      <List
        ref={listRef}
        defaultLimit={100}
        getList={useCallback(
          async (page, limit) => {
            const response = await fetch(
              `/api/list?page=${page}&limit=${limit}&search=${search}`
            );
            const data = await response.json();
            return {
              list: data.items,
              isEnd: data.isEnd
            };
          },
          [search],
        )}
        renderItem={(item, index) => (
          <div key={item.id}>
            {index}: {item.name}
          </div>
        )}
        // Optional: Enable virtual scrolling
        renderItemHeight={(item) => 120}
        // Custom styling and messages
        space={{ vertical: true, size: '8px' }}
        noData={<div>No data available</div>}
        noMore={<div>No more items</div>}
        loadingTip={<div>Loading...</div>}
      />
    </Space>
  );
};

```

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

### Multi-level Menu Component in React

Source: https://context7.com/ryozm/kqdoc/llms.txt

Implements a multi-level navigation menu with different display modes (children, list, single column) using the @kqinfo/ui library. It supports nested menus and selection handling. Dependencies include React and @kqinfo/ui.

```tsx
import { Menu } from '@kqinfo/ui';
import { useState } from 'react';

export default () => {
  const [current, setCurrent] = useState('1-1-1');

  const menuData = [
    {
      id: '1',
      name: 'Dashboard',
      children: [
        {
          id: '1-1',
          name: 'Analytics',
          children: [
            { id: '1-1-1', name: 'Overview' },
            { id: '1-1-2', name: 'Reports' },
          ]
        },
        {
          id: '1-2',
          name: 'Sales',
          children: [
            { id: '1-2-1', name: 'Orders' },
            { id: '1-2-2', name: 'Revenue' },
          ]
        }
      ]
    },
    {
      id: '2',
      name: 'Settings',
      children: [
        { id: '2-1', name: 'Profile' },
        { id: '2-2', name: 'Security' },
      ]
    }
  ];

  return (
    <>
      {/* Default children mode with submenu */}
      <Menu
        data={menuData}
        current={current}
        menuMode="children"
        childrenMenuMode="subMenu"
        onChange={(id, children) => {
          console.log('Selected:', id, children);
          setCurrent(id);
        }}
        onSelect={(item) => {
          console.log('Menu item selected:', item);
        }}
      />

      {/* List mode */}
      <Menu
        data={menuData}
        current={current}
        menuMode="list"
        onChange={(id) => setCurrent(id)}
      />

      {/* Single column collapsible mode */}
      <Menu
        data={menuData}
        current={current}
        menuMode="singleCol"
        onChange={(id) => setCurrent(id)}
      />
    </>
  );
};

```

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

### Table Component with Custom Rendering in React

Source: https://context7.com/ryozm/kqdoc/llms.txt

Demonstrates a data table with sorting, custom columns, and row actions using the @kqinfo/ui library. It includes custom rendering for status and action buttons. Dependencies include React and @kqinfo/ui.

```tsx
import { Table, Space, Button } from '@kqinfo/ui';
import { useState } from 'react';

interface User {
  id: string;
  name: string;
  age: number;
  email: string;
  status: 'active' | 'inactive';
}

export default () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<User[]>([
    { id: '1', name: 'John Doe', age: 28, email: 'john@example.com', status: 'active' },
    { id: '2', name: 'Jane Smith', age: 32, email: 'jane@example.com', status: 'inactive' },
  ]);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      width: 80,
    },
    {
      title: 'Email',
      dataIndex: 'email',
      width: 200,
    },
    {
      title: 'Status',
      dataIndex: 'status',
      width: 100,
      render: (status: string) => (
        <span style={{ color: status === 'active' ? '#52c41a' : '#ff4d4f' }}>
          {status === 'active' ? 'Active' : 'Inactive'}
        </span>
      ),
    },
    {
      title: 'Actions',
      width: 150,
      render: (_, record: User) => (
        <Space size={'8px'}>
          <Button
            size={'tiny'}
            type={'primary'}
            onTap={() => console.log('Edit:', record.id)}
          >
            Edit
          </Button>
          <Button
            size={'tiny'}
            type={'attract'}
            onTap={() => console.log('Delete:', record.id)}
          >
            Delete
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      loading={loading}
      doubleColor="#f5f5f5"
      align="center"
      onRowTap={(record) => console.log('Row clicked:', record)}
    />
  );
};

```

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

### Get Account Info Synchronous Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Retrieves account-related information synchronously, such as the user's unique identifier or the app ID. This is often used for identifying the user or the application context. It returns an object containing account details.

```javascript
import { getAccountInfoSync } from "../utils/one/get-account-info-sync";

// Example Usage:
try {
  const accountInfo = getAccountInfoSync();
  console.log('Account Info:', accountInfo);
} catch (error) {
  console.error('Failed to get account info:', error);
}
```

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

### Get Address Options Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Retrieves options or data related to geographical addresses, potentially for use in address selection components or for data validation. This could involve fetching regions, cities, or postal codes.

```javascript
import { getAddressOptions } from "../utils/business/get-address-options";

// Example Usage:
async function loadAddressData() {
  try {
    const options = await getAddressOptions('province'); // e.g., get provinces
    console.log('Address Options:', options);
  } catch (error) {
    console.error('Failed to get address options:', error);
  }
}
```

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

### Form Component with Validation and Auto-Caching (React/TSX)

Source: https://context7.com/ryozm/kqdoc/llms.txt

A comprehensive form component built with React and TypeScript, featuring auto-caching, declarative validation rules, and support for various input types. It utilizes the '@kqinfo/ui' library for form elements and layout. The component handles form submission and validation failures, providing feedback to the user.

```tsx
import { Form, FormItem, Button, Input, InputNumber, Switch, ArrSelect } from '@kqinfo/ui';
import { useState } from 'react';

export default () => {
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      autoCacheKey="user-form"
      onFinish={(values) => {
        console.log('Form values:', values);
        // Submit to API
        return fetch('/api/submit', {
          method: 'POST',
          body: JSON.stringify(values)
        });
      }}
      onFinishFailed={({ errorFields }) => {
        console.log('Validation failed:', errorFields);
      }}
    >
      {/* Basic input */}
      <FormItem
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Username is required' }Д]}
      >
        <Input placeholder="Enter username" />
      </FormItem>

      {/* Email validation */}
      <FormItem
        name="email"
        label="Email"
        rules={[
          { required: true },
          { type: 'email', message: 'Please enter a valid email' }
        ]}
      >
        <Input placeholder="Enter email" />
      </FormItem>

      {/* Number input with range */}
      <FormItem
        name="age"
        label="Age"
        rules={[
          { required: true },
          { type: 'number', min: 18, max: 100, message: 'Age must be 18-100' }
        ]}
      >
        <InputNumber min={18} max={100} />
      </FormItem>

      {/* Select with options */}
      <FormItem
        name="role"
        label="Role"
        rules={[{ required: true }Д]}
      >
        <ArrSelect options={[
          { value: 'admin', label: 'Administrator' },
          { value: 'user', label: 'User' }
        ]} />
      </FormItem>

      {/* Conditional fields */}
      <FormItem
        name="enableNotifications"
        label="Enable Notifications"
        valuePropName="checked"
      >
        <Switch />
      </FormItem>

      <Form.Item shouldUpdate={(prev, curr) => prev.enableNotifications !== curr.enableNotifications}>
        {({ getFieldValue }) =>
          getFieldValue('enableNotifications') ? (
            <FormItem name="notificationEmail" label="Notification Email">
              <Input placeholder="Enter notification email" />
            </FormItem>
          ) : null
        }
      </Form.Item>

      {/* Submit button */}
      <Button onTap={() => form.submit()} type="primary">
        Submit
      </Button>
    </Form>
  );
};

```

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

### Parsec-Admin CRUD Table Implementation in React

Source: https://context7.com/ryozm/kqdoc/llms.txt

Implements a complete CRUD table for user management with features like search, pagination, and modal forms for editing. It utilizes various components from 'parsec-admin' and 'react-router-dom' for routing and state management. The component fetches user data, handles modal visibility for adding/editing users, and displays user information in a table with action buttons.

```tsx
import {
  actionConfirm,
  ActionsWrap,
  DateShow,
  DayRangePicker,
  handleSubmit,
  LinkButton,
  TableList,
  useModal
} from 'parsec-admin';
import React from 'react';
import { useHistory } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import apis from '../api';

export default () => {
  const history = useHistory();
  const { id } = useParams<{ id: string }>();

  // Fetch user details
  const {
    data: { data },
    request: getUserDetail,
    loading,
  } = apis.userDetail({
    params: { id: id },
    initValue: {},
    needInit: !!id
  });

  // Modal for editing user name and phone
  const switchModalVisible = useModal(({ id }) => ({
    title: `${id ? 'Edit' : 'Add'} User Information`,
    onSubmit: ({ ...values }: any) =>
      handleSubmit(() => {
        return id
          ? apis.updateNurse.request({ ...values })
          : apis.addNurse.request({ ...values });
      }),
    items: [
      {
        label: 'ID',
        name: 'id',
        render: false
      },
      {
        label: 'User Name',
        name: 'truename',
        required: true
      },
      {
        label: 'Phone Number',
        name: 'phone',
        required: true
      }
    ]
  }));

  return (
    <TableList
      tableTitle={'Customer List'}
      showTool={false}
      showExpand={false}
      exportExcelButton={false}
      scroll={{ x: 1800 }}
      action={
        <Button type='primary' onClick={() => switchModalVisible()}>
          Add New
        </Button>
      }
      columns={[
        {
          title: 'User ID',
          dataIndex: 'id',
          align: 'center',
          width: 180
        },
        {
          title: 'Created Time',
          dataIndex: 'createdAt',
          align: 'center',
          width: 120,
          render: v => <DateShow>{v}</DateShow>,
          searchIndex: ['createdAtBegin', 'createdAtEnd'],
          search: <DayRangePicker valueFormat='YYYY-MM-DD HH:mm:ss' />,
          searchSort: 2
        },
        {
          title: 'User Name',
          dataIndex: 'truename',
          align: 'center',
          width: 120,
          search: true,
          searchSort: 1
        },
        {
          title: 'Status',
          align: 'center',
          dataIndex: 'enable',
          width: 80,
          render: v => (v === true ? 'Enabled' : v === false ? 'Disabled' : '-')
        },
        {
          title: 'Actions',
          excelRender: false,
          align: 'center',
          fixed: 'right',
          width: 120,
          render: (v, record: any) => (
            <ActionsWrap max={8}>
              <LinkButton
                onClick={() => history.push('/userList/' + record.id)}>
                View
              </LinkButton>
              <LinkButton
                onClick={() => {
                  switchModalVisible({
                    id: record.id,
                    truename: record.truename,
                    phone: record.phone
                  });
                }}>
                Edit
              </LinkButton>
              <LinkButton
                onClick={() => {
                  actionConfirm(
                    () =>
                      apis.enableUser.request({
                        id: record.id,
                        enable: !record.enable
                      }),
                    record.enable ? 'Disable' : 'Enable'
                  );
                }}>
                {record.enable ? 'Disable' : 'Enable'}
              </LinkButton>
            </ActionsWrap>
          )
        }
      ]}
      getList={({ pagination: { current = 1, pageSize = 10 }, params }) => {
        return apis.userList
          .request({
            pageNum: current,
            numPerPage: pageSize,
            ...params
          })
          .then(data => {
            return {
              list: data.data.recordList || [],
              total: data.data.totalCount || 0
            };
          });
      }}
    />
  );
};

```

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

### Show Custom Modal without Background Dismiss (React/TSX)

Source: https://context7.com/ryozm/kqdoc/llms.txt

Illustrates creating a modal that cannot be dismissed by clicking outside its content. This is achieved by setting `maskClosable` to `false`. The modal contains a button to manually close it using `Modal.hide()`. This example is useful for forms or actions that require explicit user confirmation.

```tsx
import { Modal, Button } from '@kqinfo/ui';

      <Button
        type={'primary'}
        onTap={() =>
          Modal.show({
            title: 'Manual Hide',
            maskClosable: false,
            content: <Button onTap={() => Modal.hide()}>Hide Modal</Button>,
            footer: null,
          })
        }
      >
        Manual Hide Modal
      </Button>
```

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

### Navigate to Mini Program Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Navigates the user to another mini-program. This is a core function for linking different mini-programs together, allowing for a more integrated user experience. It requires the target mini-program's ID and the path within it.

```javascript
import { navigateToMiniProgram } from "../utils/one/navigate-to-mini-program";

// Example Usage:
navigateToMiniProgram({
  appId: 'wxabcdef1234567890',
  path: 'pages/user/profile?id=123',
  envVersion: 'release',
  success: () => console.log('Navigation successful'),
  fail: (error) => console.error('Navigation failed:', error)
});
```

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

### Open Mini Program Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Allows navigation to another mini-program from the current one. This is useful for linking related applications or services. It requires the target mini-program's appId and path.

```javascript
import { OpenWeapp } from "../components/general/open-weapp";

// Example Usage:
OpenWeapp.navigateTo({
  appId: 'wxa123456789abcdef',
  path: 'pages/index/index',
  success: () => console.log('Navigated successfully'),
  fail: (err) => console.error('Navigation failed:', err)
});
```

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

### Components - Layout

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Components for structuring and arranging UI elements.

```APIDOC
## Scroll View

### Description
Component that enables scrollable content areas.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **scrollX** (boolean) - Optional - Enables
```

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

### Create Animation Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

A utility for creating and managing animations within the application. This allows for dynamic visual effects and transitions. It might return an animation context or configuration object.

```javascript
import { createAnimation } from "../utils/business/create-animation";

// Example Usage:
const animation = createAnimation();
animation
  .opacity(0)
  .step({
    duration: 1000
  })
  .opacity(1)
  .step({
    duration: 1000
  });

// Then apply this animation to an element.
```

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

### Get Current Location Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

A utility function to retrieve the user's current geographical location. This requires user permission and is essential for location-based services. It returns latitude and longitude coordinates.

```javascript
import { getLocation } from "../utils/one/get-location";

// Example Usage:
async function showUserLocation() {
  try {
    const location = await getLocation();
    console.log("Latitude:", location.latitude);
    console.log("Longitude:", location.longitude);
  } catch (error) {
    console.error("Failed to get location:", error);
  }
}
```

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

### Components - General

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

General-purpose UI components for various application needs.

```APIDOC
## Platform

### Description
Component for displaying platform-specific information or UI elements.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **platformName** (string) - Required - The name of the platform to display.

### Response
N/A (Component renders UI)

### Response Example
N/A

## Open Weapp

### Description
Component or utility to open other WeChat mini-programs.

### Method
N/A (Function Call or Component)

### Endpoint
N/A

### Parameters
- **appId** (string) - Required - The appId of the target mini-program.
- **path** (string) - Optional - The path within the target mini-program.

### Response
- **Status** (boolean) - Indicates if the navigation was initiated successfully.

### Response Example
```json
{
  "success": true
}
```

## Modal

### Description
Component for displaying modal dialog boxes.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **visible** (boolean) - Required - Controls the visibility of the modal.
- **title** (string) - Required - The title of the modal.
- **content** (string) - Required - The content to display in the modal.
- **onClose** (function) - Optional - Callback when the modal is closed.

### Response
N/A (Component renders UI)

### Response Example
N/A
```

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

### Create Map Context Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Provides a way to control map instances programmatically. This utility allows developers to interact with a map component after it has been rendered, such as moving the map, adding markers, or responding to events. It typically requires a map component's ID.

```javascript
import { createMapContext } from "../utils/one/create-map-context";

// Example Usage:
const mapContext = createMapContext('myMapId'); // Assuming your Map component has id='myMapId'

mapContext.moveToLocation({
  longitude: 113.264435,
  latitude: 23.129080,
  speed: 10,
  success: () => console.log('Map moved successfully'),
  fail: (err) => console.error('Failed to move map:', err)
});
```

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

### Utilities - One

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

APIs for system and storage utilities, including location, storage management, and device interactions.

```APIDOC
## Get Location

### Description
Retrieves the current geographical location of the device.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None explicitly defined in the provided text.

### Response
- **Latitude** (number) - The latitude of the current location.
- **Longitude** (number) - The longitude of the current location.

### Response Example
```json
{
  "latitude": 34.0522,
  "longitude": -118.2437
}
```

## Get Storage Sync

### Description
Synchronously retrieves data from local storage.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **key** (string) - Required - The key of the data to retrieve.

### Response
- **Data** (any) - The data stored under the specified key.

### Response Example
```json
{
  "data": "stored_value"
}
```

## Set Storage Sync

### Description
Synchronously saves data to local storage.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **key** (string) - Required - The key to store the data under.
- **data** (any) - Required - The data to store.

### Response
- **Success** (boolean) - Indicates if the data was saved successfully.

### Response Example
```json
{
  "success": true
}
```

## Remove Storage Sync

### Description
Synchronously removes data from local storage.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **key** (string) - Required - The key of the data to remove.

### Response
- **Success** (boolean) - Indicates if the data was removed successfully.

### Response Example
```json
{
  "success": true
}
```

## Clear Storage Sync

### Description
Synchronously clears all data from local storage.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Success** (boolean) - Indicates if the storage was cleared successfully.

### Response Example
```json
{
  "success": true
}
```

## Create Map Context

### Description
Creates a context for interacting with a map component.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **mapId** (string) - Required - The ID of the map component.

### Response
- **Map Context Object** (object) - An object to control map functionalities.

### Response Example
```json
{
  "mapContext": "..."
}
```

## Request Subscribe Message

### Description
Requests user permission to subscribe to message notifications.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **templateIds** (array) - Required - An array of template IDs to subscribe to.

### Response
- **Status** (string) - The result of the subscription request (e.g., 'success', 'fail').

### Response Example
```json
{
  "status": "success"
}
```

## Debug

### Description
Enables or disables debugging functionalities.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **enable** (boolean) - Required - Whether to enable or disable debugging.

### Response
- **Status** (boolean) - Indicates if the debug setting was applied successfully.

### Response Example
```json
{
  "success": true
}
```

## Get Account Info Sync

### Description
Synchronously retrieves information about the current user account.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Account Info** (object) - An object containing account details.

### Response Example
```json
{
  "userId": "user123",
  "accountId": "acc456"
}
```

## Scan Code

### Description
Initiates a QR code or barcode scanning process.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None explicitly defined in the provided text.

### Response
- **Scanned Data** (string) - The data content of the scanned code.
- **Scan Type** (string) - The type of code scanned (e.g., 'QR_CODE').

### Response Example
```json
{
  "scannedData": "https://example.com",
  "scanType": "QR_CODE"
}
```

## Choose Image

### Description
Allows the user to select one or more images from their device.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **count** (number) - Optional - The maximum number of images to choose.
- **sizeType** (array) - Optional - The desired size types ('original', 'compressed').
- **sourceType** (array) - Optional - The sources to choose from ('album', 'camera').

### Response
- **Image Paths** (array) - An array of local file paths for the chosen images.

### Response Example
```json
{
  "imagePaths": [
    "/path/to/image1.jpg",
    "/path/to/image2.png"
  ]
}
```

## Set Clipboard Data

### Description
Copies text to the system clipboard.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **data** (string) - Required - The text data to copy to the clipboard.

### Response
- **Success** (boolean) - Indicates if the data was copied successfully.

### Response Example
```json
{
  "success": true
}
```

## Get Clipboard Data

### Description
Retrieves text from the system clipboard.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Data** (string) - The text content from the clipboard.

### Response Example
```json
{
  "data": "Text from clipboard."
}
```

## Hide Tab Bar

### Description
Hides the application's tab bar.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Status** (boolean) - Indicates if the tab bar was hidden successfully.

### Response Example
```json
{
  "success": true
}
```

## Show Tab Bar

### Description
Shows the application's tab bar.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Status** (boolean) - Indicates if the tab bar was shown successfully.

### Response Example
```json
{
  "success": true
}
```

## Hide App Home Button

### Description
Hides the home button in the application's header.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Status** (boolean) - Indicates if the home button was hidden successfully.

### Response Example
```json
{
  "success": true
}
```

## Navigate To Mini Program

### Description
Navigates the user to another mini-program.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **appId** (string) - Required - The appId of the target mini-program.
- **path** (string) - Optional - The path within the target mini-program.
- **extraData** (object) - Optional - Data to pass to the target mini-program.

### Response
- **Status** (boolean) - Indicates if the navigation was initiated successfully.

### Response Example
```json
{
  "success": true
}
```

## Save Image To Photos Album

### Description
Saves an image to the device's photo album.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **filePath** (string) - Required - The local path of the image file.

### Response
- **Success** (boolean) - Indicates if the image was saved successfully.

### Response Example
```json
{
  "success": true
}
```

## Show Action Sheet

### Description
Displays an action sheet to the user for selection.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **itemList** (array) - Required - An array of strings for the action sheet items.
- **success** (function) - Optional - Callback function on success.
- **fail** (function) - Optional - Callback function on failure.

### Response
- **Tap Index** (number) - The index of the item tapped by the user.

### Response Example
```json
{
  "tapIndex": 1
}
```

## Set Navigation Bar Color

### Description
Sets the color of the navigation bar.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **frontColor** (string) - Required - The color of the text and icons in the nav bar ('black' or 'white').
- **backgroundColor** (string) - Required - The background color of the nav bar (hex color code).

### Response
- **Status** (boolean) - Indicates if the navigation bar color was set successfully.

### Response Example
```json
{
  "success": true
}
```

## Set Navigation Bar Title

### Description
Sets the title of the navigation bar.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **title** (string) - Required - The new title for the navigation bar.

### Response
- **Status** (boolean) - Indicates if the navigation bar title was set successfully.

### Response Example
```json
{
  "success": true
}
```

## Use Get System Info Sync

### Description
Synchronously retrieves system information about the device and environment.

### Method
N/A (Hook/Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **System Info** (object) - An object containing various system details.

### Response Example
```json
{
  "screenWidth": 375,
  "screenHeight": 667,
  "platform": "ios"
}
```

## Use Safe Area

### Description
Hook to get information about the device's safe area.

### Method
N/A (Hook/Function Call)

### Endpoint
N/A

### Parameters
None.

### Response
- **Safe Area Insets** (object) - An object detailing the safe area insets (top, right, bottom, left).

### Response Example
```json
{
  "top": 44,
  "right": 0,
  "bottom": 34,
  "left": 0
}
```
```

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

### Components - Feedback

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Components for user feedback, alerts, and interactive elements.

```APIDOC
## Jigsaw

### Description
Component for displaying and interacting with jigsaw puzzles.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **imageUrl** (string) - Required - The URL of the image for the puzzle.
- **onPuzzleComplete** (function) - Optional - Callback when the puzzle is completed.

### Response
N/A (Component renders UI)

### Response Example
N/A

## Show Frequent Modal

### Description
Displays a modal dialog with frequently used options or information.

### Method
N/A (Function Call)

### Endpoint
N/A

### Parameters
- **title** (string) - Required - The title of the modal.
- **content** (string) - Required - The content to display in the modal.
- **onClose** (function) - Optional - Callback when the modal is closed.

### Response
N/A (Modal is displayed to the user)

### Response Example
N/A

## Skeleton

### Description
Component for displaying skeleton loaders.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **loading** (boolean) - Required - Indicates if the content is currently loading.

### Response
N/A (Component renders UI)

### Response Example
N/A

## Affirm Sheet

### Description
Displays a confirmation sheet for user actions.

### Method
N/A (Component)

### Endpoint
N/A

### Parameters
- **title** (string) - Required - The title of the confirmation sheet.
- **message** (string) - Required - The confirmation message.
- **onConfirm** (function) - Required - Callback when the user confirms.
- **onCancel** (function) - Optional - Callback when the user cancels.

### Response
N/A (Component renders UI)

### Response Example
N/A
```

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

### Platform Information Component

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Displays information about the current platform the application is running on. This could include details like the operating system, device model, or app version. It's useful for debugging and tailoring experiences.

```javascript
import Platform from "../components/general/platform";

// Example Usage:
<Platform />;
```

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

### User Login Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Handles the user authentication process, likely for a mini-program or web application. It manages login states, potentially integrating with platform-specific authentication mechanisms. This function might return user information or an authentication token.

```javascript
import { login } from "../utils/business/login";

// Example Usage:
async function handleLogin() {
  try {
    const userInfo = await login();
    console.log("Login successful:", userInfo);
  } catch (error) {
    console.error("Login failed:", error);
  }
}
```

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

### File Upload Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Handles the process of uploading a file to a server. This utility abstracts the network request, potentially including progress tracking and error handling. It takes file data and a URL as input.

```javascript
import { uploadFile } from "../components/data-entry/upload-file";

// Example Usage:
async function uploadMyFile(file) {
  try {
    const response = await uploadFile({
      url: '/api/upload',
      filePath: file.path, // Assuming 'file' is a File object or similar
      name: 'file',
      onProgress: (progress) => console.log(`Upload Progress: ${progress.progress}%`)
    });
    console.log('Upload successful:', response);
  } catch (error) {
    console.error('Upload failed:', error);
  }
}
```

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

### Skeleton Loading Component

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

A component that displays a placeholder (skeleton screen) while content is being loaded. This provides a better user experience than showing blank space. It typically renders a shimmering or placeholder layout.

```javascript
import Skeleton from "../components/feedback/skeleton";

// Example Usage:
<Skeleton active />;

// Or for a specific element:
<Skeleton.Avatar size="large" />
<Skeleton.Paragraph rows={3} />;
```

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

### Choose Image Utility

Source: https://github.com/ryozm/kqdoc/blob/main/kqui/llms.txt

Allows the user to select images from their device's album or camera. This is a common feature for profile picture uploads or adding images to posts. It returns an array of selected image file paths or data.

```javascript
import { chooseImage } from "../utils/one/choose-image";

// Example Usage:
async function selectAndDisplayImage() {
  try {
    const result = await chooseImage({ count: 1 }); // Select only one image
    console.log('Selected image path:', result.tempFilePaths[0]);
    // You can then use this path to display the image
  } catch (error) {
    console.error('Image selection failed:', error);
  }
}
```