• English

      • Dictionary Data

      XinAdmin provides complete dictionary data management, supporting dynamic rendering of tags, badges, or text based on dictionary codes in frontend components.

      Data Structure

      Dictionary Type (sys_dict)

      FieldTypeDescription
      idintDictionary ID
      namestringDictionary name
      codestringDictionary code (unique)
      describestringDictionary description
      statusintStatus: 0-normal, 1-disabled
      sortintSort order
      created_atdatetimeCreated time
      updated_atdatetimeUpdated time

      Dictionary Item (sys_dict_item)

      FieldTypeDescription
      idintItem ID
      dict_idintParent dictionary ID
      labelstringItem label
      valuestringItem value
      colorstringColor value (for tag display)
      statusintStatus: 0-normal, 1-disabled
      sortintSort order

      DictTag Component

      The DictTag component renders corresponding tags, badges, or text based on dictionary code and value.

      Location

      source_code/web/components/DictTag/index.tsx

      Usage

      import DictTag from '@/components/DictTag';

// Render as Tag (default)
<DictTag code="user_status" value={1} />

// Render as text
<DictTag code="user_status" value={1} renderType="text" />

// Render as Badge
<DictTag code="user_status" value={1} renderType="badge" />

// Custom default values
<DictTag code="user_status" value={99} defaultText="Unknown" defaultColor="gray" />

      Props

      PropTypeDefaultDescription
      codestringrequiredDictionary code
      valuestring | numberrequiredDictionary value
      renderType'text' | 'tag' | 'badge''text'Render style
      defaultTextstring'-'Text to show when value not found
      defaultColorstring'default'Color when value not found

      Dictionary State Management

      XinAdmin uses Zustand to manage dictionary data with the following features:

      Initialize Dictionary

      import useDictStore from '@/stores/dict';

const { initDict } = useDictStore();

// Call when application starts
await initDict();

      Get Dictionary Item

      import useDictStore from '@/stores/dict';

const getDictItem = useDictStore((state) => state.getDictItem);

// Get single dictionary item
const item = getDictItem('user_status', 1);
// Returns: { label: 'Active', value: '1', color: 'green' }

      Get Options List

      import useDictStore from '@/stores/dict';

const getOptions = useDictStore((state) => state.getOptions);

// Get select options
const options = getOptions('user_status');
// Returns: [{ label: 'Active', value: '1' }, { label: 'Disabled', value: '0' }]

      API Reference

      Get All Dictionaries

      Request

      GET /api/admin/system/dict/list/all

      Response

      {
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "User Status",
      "code": "user_status",
      "describe": "User status dictionary",
      "status": 0,
      "sort": 1,
      "dict_items": [
        {
          "id": 1,
          "label": "Active",
          "value": "1",
          "color": "green",
          "sort": 1
        },
        {
          "id": 2,
          "label": "Disabled",
          "value": "0",
          "color": "red",
          "sort": 2
        }
      ]
    }
  ]
}

      Dictionary Management API

      Automatically generated using CRUD annotations:

      APIMethodPathDescription
      ListGET/api/admin/system/dict/listGet dictionary list
      DetailGET/api/admin/system/dict/list/{id}Get dictionary detail
      CreatePOST/api/admin/system/dict/listCreate dictionary
      UpdatePUT/api/admin/system/dict/list/{id}Update dictionary
      DeleteDELETE/api/admin/system/dict/list/{id}Delete dictionary

      Dictionary Item Management API

      APIMethodPathDescription
      ListGET/api/admin/system/dict/itemGet item list
      DetailGET/api/admin/system/dict/item/{id}Get item detail
      CreatePOST/api/admin/system/dict/itemCreate item
      UpdatePUT/api/admin/system/dict/item/{id}Update item
      DeleteDELETE/api/admin/system/dict/item/{id}Delete item

      Usage Examples

      Using in Table

      import { Table } from 'antd';
import DictTag from '@/components/DictTag';

const columns = [
  {
    title: 'Status',
    dataIndex: 'status',
    render: (value) => <DictTag code="user_status" value={value} renderType="tag" />
  }
];

      Using in Select

      import { Select } from 'antd';
import useDictStore from '@/stores/dict';

const options = useDictStore((state) => state.getOptions)('user_status');

<Select options={options} />

      Complete Example

      import React from 'react';
import { Card, Table, Tag } from 'antd';
import DictTag from '@/components/DictTag';
import useDictStore from '@/stores/dict';

const UserList: React.FC = () => {
  const getOptions = useDictStore((state) => state.getOptions);

  const columns = [
    {
      title: 'Username',
      dataIndex: 'username',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      render: (value: number) => (
        <DictTag
          code="user_status"
          value={value}
          renderType="tag"
        />
      )
    },
    {
      title: 'Roles',
      dataIndex: 'role',
      render: (_, record) => (
        <>
          {record.roles.map((role) => (
            <Tag key={role.id}>{role.name}</Tag>
          ))}
        </>
      )
    }
  ];

  return (
    <Card>
      <Table columns={columns} dataSource={data} />
    </Card>
  );
};