Gi Admin Pro

Gi Admin Pro follows specific naming conventions for components and styles to ensure consistency and ease of use:

Global Component Prefix

All global components use the Gi prefix (e.g., GiTable, GiForm, GiPageLayout). This prefix is used to distinguish global components from local ones and supports on-demand loading.

Component Naming (PascalCase)

.vue filenames and component usage in templates follow PascalCase (e.g., MyComponent.vue). This follows the Vue style guide and improves searchability compared to kebab-case.

CSS Class Naming (kebab-case)

CSS class names use kebab-case (e.g., .my-class-name) to align with industry standards.

Use these patterns to improve readability and maintainability:

• Ternary Operators: Use instead of if/else for simple assignments.
• Array Includes: Use [1, 2, 3].includes(type) instead of multiple || checks.
• Arrow Functions: Use for concise function definitions.
• Object Mapping: Replace if/else if chains with object lookups (e.g., const message = messageMap[status]).
• Object Parameters: When a function has more than two arguments, pass them as a single object to improve extensibility and readability.

// Instead of multiple arguments
function createUser({ name, phone, age }: { name: string, phone: string, age: number }) {
  console.log('姓名', name)
}

createUser({ name: '张三', phone: '178****2828', age: 20 })

To get started with the Gi Admin Pro template, install the dependencies using npm and then start the development server.

Installation

npm install

Development

To run the project in development mode:

npm run dev

Production Build

To build the project for production:

npm run build

Depending on whether you need loading states or error handling, use one of the following three patterns for asynchronous API calls (assuming getUserListApi is an Axios-based function):

1. Basic: No loading, no error handling (relies on global interceptors).
2. Full: Includes loading state and try/catch/finally for error handling and UI feedback.
3. Loading Only: Includes loading state but omits explicit catch blocks (useful if errors are handled globally).

// Pattern 2: Loading + Error Handling
const loading = ref(false)
const userList = ref<UserItem[]>([])

const getUserList = async () => {
  try {
    loading.value = true
    const res = await getUserListApi()
    userList.value = res.data
  } catch (error) {
    // Error handling logic
  } finally {
    loading.value = false
  }
}

You can preview the live demo of Gi Admin Pro at the following URL:

Gi Admin Pro Preview

Demo Credentials

Use the following credentials to log in to the preview environment:

Form items can have their visibility (hide) or enabled state (disabled) controlled dynamically based on the current form model values. You can pass either a boolean or a function that receives the current form model as an argument.

interface MyFormData {
  isSpecial: boolean;
  extraInfo: string;
}

const columns: FormColumnItem<MyFormData>[] = [
  {
    field: 'isSpecial',
    type: 'switch',
    label: 'Enable Special Mode'
  },
  {
    field: 'extraInfo',
    type: 'input',
    label: 'Special Info',
    // Only show this field if isSpecial is true
    hide: (model) => !model.isSpecial,
    // Disable this field if isSpecial is false
    disabled: (model) => !model.isSpecial
  }
];

You can customize the rendering of specific parts of a form item using the slots property in a FormColumnItem. This allows you to inject custom VNodes into specific sub-components (like the prefix of an input or the options of a select).

// Example: Customizing a Select component's label and option rendering
const columns: FormColumnItem[] = [
  {
    field: 'category',
    type: 'select',
    slots: {
      label: ({ data }) => h('span', { style: 'color: red' }, data.label),
      option: ({ data }) => h('div', data.label)
    }
  }
];

By default, useTable only tracks selection for the current visible page. If you enable crossPageSelect: true in the useTable options, the hook will maintain a persistent list of selected keys across different pages.

• When crossPageSelect is false (default): selectedKeys is overwritten by the keys of the current page whenever a selection event occurs.
• When crossPageSelect is true: The hook merges the new selection with the existing selectedKeys, ensuring that keys from previously visited pages are preserved unless they are explicitly deselected.

This project uses @antfu/eslint-config for linting. The configuration is exported as a default function call that accepts multiple configuration objects. You can enable core features like vue and typescript via the first configuration object and define specific rules or file patterns in subsequent objects.

Key configuration options in the primary object:

• vue: Boolean to enable Vue linting support.
• typescript: Boolean to enable TypeScript linting support.
• ignores: Array of file patterns to exclude from linting (e.g., README.md).

import antfu from '@antfu/eslint-config'

export default antfu(
  {
    vue: true,
    typescript: true,
    ignores: [
      'README.md',
      'src/types/shims-vue.d.ts'
    ]
  },
  // ... additional config objects
)