diff --git a/src/api/service/Api.ts b/src/api/service/Api.ts
index 9a4ef07..5692535 100644
--- a/src/api/service/Api.ts
+++ b/src/api/service/Api.ts
@@ -73,8 +73,35 @@ export interface User {
    * @example "example@mail.com"
    */
   email: string;
-  /** 用户角色ID */
+  /** 角色ID数组 */
   roleIds: number[];
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface UpdateUserDto {
@@ -136,6 +163,33 @@ export interface Permission {
    * @example "文章列表"
    */
   description: string;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface CreateRoleDto {
@@ -210,6 +264,33 @@ export interface LoginLog {
    * @example "windows 10"
    */
   os: string;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface UpdateLogDto {
@@ -287,6 +368,33 @@ export interface Upload {
    * @example ".jpg"
    */
   extension: string;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface CreatePostDto {
@@ -319,6 +427,33 @@ export interface Post {
    * @example "文章作者"
    */
   author: User;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface UpdatePostDto {
@@ -404,6 +539,33 @@ export interface Category {
    * @example 0
    */
   parentId?: number;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface UpdateCategoryDto {
@@ -504,7 +666,37 @@ export interface Menu {
    * @example 1
    */
   type: number;
+  /** 父级ID */
   parentId: number;
+  /** 子项数组 */
+  children: Menu[];
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
 }
 
 export interface UpdateMenuDto {
@@ -540,6 +732,166 @@ export interface UpdateMenuDto {
   type?: number;
 }
 
+export interface CreateDictTypeDto {
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code: string;
+  /** 描述 */
+  description: string;
+}
+
+export interface DictType {
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code: string;
+  /**
+   * 状态
+   * @example true
+   */
+  status: boolean;
+  /** 描述 */
+  description: string;
+  /** 字典数组 */
+  dicts: Dict[];
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
+}
+
+export interface Dict {
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code: string;
+  /**
+   * 状态
+   * @example true
+   */
+  status: boolean;
+  /** 描述 */
+  description: string;
+  /** 字段类型 */
+  type: DictType;
+  /**
+   * 自增ID
+   * @example 1
+   */
+  id: number;
+  /**
+   * 创建时间
+   * @format date-time
+   * @example "2022-01-01 10:10:10"
+   */
+  createdAt: string;
+  /**
+   * 创建人
+   * @example "绝弹"
+   */
+  createdBy: string;
+  /**
+   * 更新时间
+   * @format date-time
+   * @example "2022-01-02 11:11:11"
+   */
+  updatedAt: string;
+  /**
+   * 更新人
+   * @example "绝弹"
+   */
+  updatedBy: string;
+}
+
+export interface UpdateDictTypeDto {
+  id: number;
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name?: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code?: string;
+  /** 描述 */
+  description?: string;
+}
+
+export interface CreateDictDto {
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code: string;
+  /** 描述 */
+  description: string;
+}
+
+export interface UpdateDictDto {
+  id: number;
+  /**
+   * 类型名称
+   * @example "性别"
+   */
+  name?: string;
+  /**
+   * 标识
+   * @example "gender"
+   */
+  code?: string;
+  /** 描述 */
+  description?: string;
+}
+
 export interface Response {
   /**
    * 状态码
@@ -741,6 +1093,70 @@ export interface GetMenusParams {
   createdFrom?: string;
 }
 
+export interface GetDictTypesParams {
+  /**
+   * 字段描述(Swagger用途)
+   * @example "示例值"
+   */
+  demo?: string;
+  /**
+   * 排序规则
+   * @default "id:desc"
+   * @pattern /^(\w+:\w+,)*\w+:\w+$/
+   * @example "id:desc"
+   */
+  sort?: string;
+  /**
+   * 页码
+   * @min 1
+   * @example 1
+   */
+  page?: number;
+  /**
+   * 每页条数
+   * @min 0
+   * @example 10
+   */
+  size?: number;
+  /**
+   * 创建起始事件
+   * @example "2020-02-02 02:02:02"
+   */
+  createdFrom?: string;
+}
+
+export interface GetDictsParams {
+  /**
+   * 字段描述(Swagger用途)
+   * @example "示例值"
+   */
+  demo?: string;
+  /**
+   * 排序规则
+   * @default "id:desc"
+   * @pattern /^(\w+:\w+,)*\w+:\w+$/
+   * @example "id:desc"
+   */
+  sort?: string;
+  /**
+   * 页码
+   * @min 1
+   * @example 1
+   */
+  page?: number;
+  /**
+   * 每页条数
+   * @min 0
+   * @example 10
+   */
+  size?: number;
+  /**
+   * 创建起始事件
+   * @example "2020-02-02 02:02:02"
+   */
+  createdFrom?: string;
+}
+
 export namespace User {
   /**
    * @description 添加用户
@@ -1920,7 +2336,293 @@ export namespace Menu {
    */
   export namespace DelMenu {
     export type RequestParams = {
-      id: string;
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = Response;
+  }
+}
+
+export namespace DictType {
+  /**
+   * @description 新增字典类型
+   * @tags dictType
+   * @name AddDictType
+   * @request POST:/api/v1/dictTypes
+   */
+  export namespace AddDictType {
+    export type RequestParams = {};
+    export type RequestQuery = {};
+    export type RequestBody = CreateDictTypeDto;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: number;
+    };
+  }
+  /**
+   * @description 查询字典类型
+   * @tags dictType
+   * @name GetDictTypes
+   * @request GET:/api/v1/dictTypes
+   */
+  export namespace GetDictTypes {
+    export type RequestParams = {};
+    export type RequestQuery = {
+      /**
+       * 字段描述(Swagger用途)
+       * @example "示例值"
+       */
+      demo?: string;
+      /**
+       * 排序规则
+       * @default "id:desc"
+       * @pattern /^(\w+:\w+,)*\w+:\w+$/
+       * @example "id:desc"
+       */
+      sort?: string;
+      /**
+       * 页码
+       * @min 1
+       * @example 1
+       */
+      page?: number;
+      /**
+       * 每页条数
+       * @min 0
+       * @example 10
+       */
+      size?: number;
+      /**
+       * 创建起始事件
+       * @example "2020-02-02 02:02:02"
+       */
+      createdFrom?: string;
+    };
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: DictType[];
+    };
+  }
+  /**
+   * @description 获取字典类型
+   * @tags dictType
+   * @name GetDictType
+   * @request GET:/api/v1/dictTypes/{id}
+   */
+  export namespace GetDictType {
+    export type RequestParams = {
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: DictType;
+    };
+  }
+  /**
+   * @description 更新字典类型
+   * @tags dictType
+   * @name SetDictType
+   * @request PATCH:/api/v1/dictTypes/{id}
+   */
+  export namespace SetDictType {
+    export type RequestParams = {
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = UpdateDictTypeDto;
+    export type RequestHeaders = {};
+    export type ResponseBody = Response;
+  }
+  /**
+   * @description 删除字典类型
+   * @tags dictType
+   * @name DelDictType
+   * @request DELETE:/api/v1/dictTypes/{id}
+   */
+  export namespace DelDictType {
+    export type RequestParams = {
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = Response;
+  }
+}
+
+export namespace Dict {
+  /**
+   * @description 新增字典
+   * @tags dict
+   * @name AddDict
+   * @request POST:/api/v1/dicts
+   */
+  export namespace AddDict {
+    export type RequestParams = {};
+    export type RequestQuery = {};
+    export type RequestBody = CreateDictDto;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: number;
+    };
+  }
+  /**
+   * @description 查询字典
+   * @tags dict
+   * @name GetDicts
+   * @request GET:/api/v1/dicts
+   */
+  export namespace GetDicts {
+    export type RequestParams = {};
+    export type RequestQuery = {
+      /**
+       * 字段描述(Swagger用途)
+       * @example "示例值"
+       */
+      demo?: string;
+      /**
+       * 排序规则
+       * @default "id:desc"
+       * @pattern /^(\w+:\w+,)*\w+:\w+$/
+       * @example "id:desc"
+       */
+      sort?: string;
+      /**
+       * 页码
+       * @min 1
+       * @example 1
+       */
+      page?: number;
+      /**
+       * 每页条数
+       * @min 0
+       * @example 10
+       */
+      size?: number;
+      /**
+       * 创建起始事件
+       * @example "2020-02-02 02:02:02"
+       */
+      createdFrom?: string;
+    };
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: Dict[];
+    };
+  }
+  /**
+   * @description 获取字典
+   * @tags dict
+   * @name GetDict
+   * @request GET:/api/v1/dicts/{id}
+   */
+  export namespace GetDict {
+    export type RequestParams = {
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = never;
+    export type RequestHeaders = {};
+    export type ResponseBody = {
+      /**
+       * 状态码
+       * @format int32
+       * @example 2000
+       */
+      code: number;
+      /**
+       * 提示信息
+       * @example "请求成功"
+       */
+      message: string;
+      data?: Dict;
+    };
+  }
+  /**
+   * @description 更新字典
+   * @tags dict
+   * @name SetDict
+   * @request PATCH:/api/v1/dicts/{id}
+   */
+  export namespace SetDict {
+    export type RequestParams = {
+      id: number;
+    };
+    export type RequestQuery = {};
+    export type RequestBody = UpdateDictDto;
+    export type RequestHeaders = {};
+    export type ResponseBody = Response;
+  }
+  /**
+   * @description 删除字典
+   * @tags dict
+   * @name DelDict
+   * @request DELETE:/api/v1/dicts/{id}
+   */
+  export namespace DelDict {
+    export type RequestParams = {
+      id: number;
     };
     export type RequestQuery = {};
     export type RequestBody = never;
@@ -3258,7 +3960,7 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @name DelMenu
      * @request DELETE:/api/v1/menus/{id}
      */
-    delMenu: (id: string, params: RequestParams = {}) => {
+    delMenu: (id: number, params: RequestParams = {}) => {
       return this.request<Response, any>({
         path: `/api/v1/menus/${id}`,
         method: "DELETE",
@@ -3267,4 +3969,272 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
       });
     },
   };
+  dictType = {
+    /**
+     * 新增字典类型
+     *
+     * @tags dictType
+     * @name AddDictType
+     * @request POST:/api/v1/dictTypes
+     */
+    addDictType: (data: CreateDictTypeDto, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: number;
+        },
+        any
+      >({
+        path: `/api/v1/dictTypes`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 查询字典类型
+     *
+     * @tags dictType
+     * @name GetDictTypes
+     * @request GET:/api/v1/dictTypes
+     */
+    getDictTypes: (query: GetDictTypesParams, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: DictType[];
+        },
+        any
+      >({
+        path: `/api/v1/dictTypes`,
+        method: "GET",
+        query: query,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 获取字典类型
+     *
+     * @tags dictType
+     * @name GetDictType
+     * @request GET:/api/v1/dictTypes/{id}
+     */
+    getDictType: (id: number, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: DictType;
+        },
+        any
+      >({
+        path: `/api/v1/dictTypes/${id}`,
+        method: "GET",
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 更新字典类型
+     *
+     * @tags dictType
+     * @name SetDictType
+     * @request PATCH:/api/v1/dictTypes/{id}
+     */
+    setDictType: (id: number, data: UpdateDictTypeDto, params: RequestParams = {}) => {
+      return this.request<Response, any>({
+        path: `/api/v1/dictTypes/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 删除字典类型
+     *
+     * @tags dictType
+     * @name DelDictType
+     * @request DELETE:/api/v1/dictTypes/{id}
+     */
+    delDictType: (id: number, params: RequestParams = {}) => {
+      return this.request<Response, any>({
+        path: `/api/v1/dictTypes/${id}`,
+        method: "DELETE",
+        format: "json",
+        ...params,
+      });
+    },
+  };
+  dict = {
+    /**
+     * 新增字典
+     *
+     * @tags dict
+     * @name AddDict
+     * @request POST:/api/v1/dicts
+     */
+    addDict: (data: CreateDictDto, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: number;
+        },
+        any
+      >({
+        path: `/api/v1/dicts`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 查询字典
+     *
+     * @tags dict
+     * @name GetDicts
+     * @request GET:/api/v1/dicts
+     */
+    getDicts: (query: GetDictsParams, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: Dict[];
+        },
+        any
+      >({
+        path: `/api/v1/dicts`,
+        method: "GET",
+        query: query,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 获取字典
+     *
+     * @tags dict
+     * @name GetDict
+     * @request GET:/api/v1/dicts/{id}
+     */
+    getDict: (id: number, params: RequestParams = {}) => {
+      return this.request<
+        {
+          /**
+           * 状态码
+           * @format int32
+           * @example 2000
+           */
+          code: number;
+          /**
+           * 提示信息
+           * @example "请求成功"
+           */
+          message: string;
+          data?: Dict;
+        },
+        any
+      >({
+        path: `/api/v1/dicts/${id}`,
+        method: "GET",
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 更新字典
+     *
+     * @tags dict
+     * @name SetDict
+     * @request PATCH:/api/v1/dicts/{id}
+     */
+    setDict: (id: number, data: UpdateDictDto, params: RequestParams = {}) => {
+      return this.request<Response, any>({
+        path: `/api/v1/dicts/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * 删除字典
+     *
+     * @tags dict
+     * @name DelDict
+     * @request DELETE:/api/v1/dicts/{id}
+     */
+    delDict: (id: number, params: RequestParams = {}) => {
+      return this.request<Response, any>({
+        path: `/api/v1/dicts/${id}`,
+        method: "DELETE",
+        format: "json",
+        ...params,
+      });
+    },
+  };
 }
diff --git a/src/components/breadcrumb/temp.dev1.vue b/src/components/breadcrumb/temp.dev1.vue
new file mode 100644
index 0000000..36d8559
--- /dev/null
+++ b/src/components/breadcrumb/temp.dev1.vue
@@ -0,0 +1,156 @@
+<template>
+  <bread-page>
+    <template #content>
+      <div class="h-full w-full grid grid-cols-[auto_1fr] gap-4 p-4">
+        <div class="bg-white w-[256px]">
+          <div class="flex items-center justify-between gap-2 px-4 h-14">
+            <span class="text-base">菜单列表</span>
+            <div>
+              <a-button>
+                <template #icon>
+                  <i class="icon-park-outline-plus"></i>
+                </template>
+              </a-button>
+            </div>
+          </div>
+          <a-tree
+            :data="menus"
+            :default-expand-all="true"
+            :block-node="true"
+            :field-names="{
+              icon: undefined,
+              title: 'name',
+              key: 'id',
+            }"
+          >
+            <template #title="node">
+              <div class="group flex-1 flex items-center justify-between gap-2">
+                <div @click="onEdit(node)">
+                  <!-- <a-tag :color="MenuTypes.fmt(node.type, 'color')" size="small" :bordered="true">
+                    {{ MenuTypes.fmt(node.type) }}
+                  </a-tag> -->
+                  <i :class="node.icon" class="ml-2"></i>
+                  {{ node.name }}
+                </div>
+                <div class="hidden group-hover:block">
+                  <i
+                    v-if="node.type === MenuType.MENU"
+                    class="text-sm text-gray-400 hover:text-gray-700 icon-park-outline-plus"
+                  ></i>
+                  <i class="text-sm text-gray-400 hover:text-gray-700 icon-park-outline-delete"></i>
+                </div>
+              </div>
+            </template>
+          </a-tree>
+        </div>
+        <div class="bg-white">
+          <a-card title="菜单信息" :bordered="false">
+            <Form ref="formRef" v-bind="form"></Form>
+          </a-card>
+          <a-divider :margin="0"></a-divider>
+          <div class="px-4 mt-4">
+            <btn-table></btn-table>
+          </div>
+        </div>
+      </div>
+    </template>
+  </bread-page>
+</template>
+
+<script setup lang="tsx">
+import { Menu, api } from "@/api";
+import { useForm, Form, useAniTable, FormInstance } from "@/components";
+import { MenuType, MenuTypes } from "@/constants/menu";
+
+const formRef = ref<FormInstance | null>(null);
+const menus = ref<any[]>([]);
+const treeEach = (tree: any[], fn: any) => {
+  for (const item of tree) {
+    if (item.children) {
+      treeEach(item.children, fn);
+    }
+    fn(item);
+  }
+};
+
+const onEdit = (row: any) => {
+  formRef.value?.setModel(row);
+  (btn.props as any).data = row.buttons;
+};
+
+onMounted(async () => {
+  const res = await api.menu.getMenus({ tree: true });
+  const data = res.data.data ?? [];
+  treeEach(data, (item: Menu) => {
+    if (item.type === MenuType.BUTTON) {
+      return;
+    }
+    if (item.type === MenuType.PAGE) {
+      (item as any).buttons = (item as any).children;
+      delete (item as any).children;
+    }
+    (item as any).iconRender = () => <i class={item.icon} />;
+  });
+  menus.value = data;
+});
+
+const form = useForm({
+  items: [
+    {
+      field: "name",
+      label: "菜单名称",
+      type: "input",
+    },
+    {
+      field: "icon",
+      label: "菜单图标",
+      type: "input",
+    },
+  ],
+  async submit(arg) {
+    console.log(arg);
+  },
+});
+
+const [btnTable, btn] = useAniTable({
+  columns: [
+    {
+      title: " 名称",
+      dataIndex: "name",
+    },
+    {
+      title: "标识",
+      dataIndex: "code",
+    },
+    {
+      title: "操作",
+      type: "button",
+      width: 140,
+      buttons: [
+        {
+          type: "modify",
+          text: "修改",
+        },
+        {
+          text: "删除",
+          type: "delete",
+        },
+      ],
+    },
+  ],
+  create: {},
+  modify: {},
+});
+</script>
+
+<style lang="less" scoped></style>
+
+<route lang="json">
+{
+  "meta": {
+    "sort": 10302,
+    "title": "菜单管理",
+    "icon": "icon-park-outline-add-subtract"
+  }
+}
+</route>
diff --git a/src/components/form/form-modal.tsx b/src/components/form/form-modal.tsx
index 9ac0159..24a51f1 100644
--- a/src/components/form/form-modal.tsx
+++ b/src/components/form/form-modal.tsx
@@ -143,7 +143,7 @@ export const FormModal = defineComponent({
       }
       if (typeof props.trigger === "object") {
         content = (
-          <Button type="primary" {...omit(props.trigger, "text")}>
+          <Button type="primary" {...props.trigger.buttonProps}>
             {props.trigger?.text || "新增"}
           </Button>
         );
diff --git a/src/pages/dev/openapi.vue b/src/pages/dev/openapi.vue
index 2f96ac9..68a4fc4 100644
--- a/src/pages/dev/openapi.vue
+++ b/src/pages/dev/openapi.vue
@@ -1,10 +1,12 @@
 <template>
   <bread-page>
-    <iframe
-      src="https://apifox.com/apidoc/shared-f1ea65e6-cee8-4fe3-949f-288a7cd1af49"
-      frameborder="0"
-      class="w-full h-full"
-    ></iframe>
+    <template #content>
+      <iframe
+        src="https://apifox.com/apidoc/shared-f1ea65e6-cee8-4fe3-949f-288a7cd1af49"
+        frameborder="0"
+        class="w-full h-full"
+      ></iframe>
+    </template>
   </bread-page>
 </template>
 
diff --git a/src/dd.json b/src/pages/my/data.json
similarity index 100%
rename from src/dd.json
rename to src/pages/my/data.json
diff --git a/src/pages/my/dev.vue b/src/pages/my/dev.vue
index 0bc5579..ffdf2ba 100644
--- a/src/pages/my/dev.vue
+++ b/src/pages/my/dev.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import doc from "@/dd.json";
+import doc from "./data.json";
 import editorModal from "./editor.vue";
 import ejs from "ejs";
 import template from "./page.ejs?raw";
@@ -85,8 +85,8 @@ const onChange = (value: string | number) => {
 
 const onOpen = () => {
   const data = {
-    tag: '',
-    operationId: '',
+    tag: "",
+    operationId: "",
     create: {},
     select: {},
     modify: {},
@@ -106,7 +106,6 @@ const onOpen = () => {
       data.delete = route;
     }
   }
-  console.log(data);
   content.value = ejs.render(template, data);
 };
 </script>
diff --git a/src/pages/system/dict/components/group.vue b/src/pages/system/dict/components/group.vue
index c91f828..8d5f880 100644
--- a/src/pages/system/dict/components/group.vue
+++ b/src/pages/system/dict/components/group.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
     <div class="flex gap-2">
-      <a-input-search allow-clear placeholder="字典名称..." class="mb-2"></a-input-search>
-      <a-button @click="onCreateRow">
+      <a-input-search allow-clear placeholder="字典类型" class="mb-2"></a-input-search>
+      <a-button @click="formCtx.open">
         <template #icon>
           <i class="icon-park-outline-add"></i>
         </template>
@@ -13,12 +13,13 @@
       <ul class="pl-0 mt-0">
         <li
           v-for="item in list"
-          :key="item.id"
+          :key="item.code"
+          :class="{ active: item.id === current?.id }"
           class="group flex items-center justify-between gap-1 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
         >
-          <div>
+          <div class="flex-1 h-full flex items-center gap-2 overflow-hidden" @click="emit('change', item)">
             <i class="icon-park-outline-folder-close align-[-2px]"></i>
-            {{ item.title }}
+            <span class="flex-1 truncate">{{ item.name }}</span>
           </div>
           <div>
             <a-dropdown>
@@ -28,13 +29,13 @@
                 </template>
               </a-button>
               <template #content>
-                <a-doption @click="onModifyRow(item)">
+                <a-doption @click="formCtx.open(item)">
                   <template #icon>
                     <i class="icon-park-outline-edit"></i>
                   </template>
                   修改
                 </a-doption>
-                <a-doption class="!text-red-500" @click="onDeleteRow">
+                <a-doption class="!text-red-500" @click="onDeleteRow(item)">
                   <template #icon>
                     <i class="icon-park-outline-delete"></i>
                   </template>
@@ -50,86 +51,77 @@
 </template>
 
 <script setup lang="ts">
+import { DictType, api } from "@/api";
 import { useAniFormModal } from "@/components";
 import { delConfirm } from "@/utils";
+import { Message } from "@arco-design/web-vue";
+import { PropType } from "vue";
 
-const data = [
-  {
-    id: 1,
-    title: "用户性别",
-    count: 23,
+defineProps({
+  current: {
+    type: Object as PropType<DictType>,
   },
-  {
-    id: 2,
-    title: "微信头像",
-    count: 52,
-  },
-  {
-    id: 3,
-    title: "文章封面",
-    count: 19,
-  },
-  {
-    id: 4,
-    title: "山水诗画",
-    count: 81,
-  },
-  {
-    id: 5,
-    title: "虾米沙雕",
-    count: 12,
-  },
-];
+});
 
-const list = ref(data);
+const emit = defineEmits(["change"]);
+const list = ref<DictType[]>([]);
 
-const onModifyRow = (row: any) => {
-  formCtx.props.title = "修改字典";
-  formCtx.open(row);
+const updateDictTypes = async () => {
+  const res = await api.dictType.getDictTypes({ size: 0 });
+  list.value = res.data.data ?? [];
+  list.value.length && emit("change", list.value[0]);
 };
 
-const onCreateRow = () => {
-  formCtx.props.title = "新建字典";
-  formCtx.open();
-};
+onMounted(updateDictTypes);
 
-const onDeleteRow = async () => {
+const onDeleteRow = async (row: DictType) => {
   await delConfirm();
+  const res = await api.dictType.delDictType(row.id);
+  Message.success(res.data.message);
 };
 
 const [formModal, formCtx] = useAniFormModal({
-  title: "修改分组",
+  title: ({ model }) => (!model.id ? "新建字典类型" : "修改字典类型"),
   trigger: false,
   modalProps: {
-    width: 432,
+    width: 580,
   },
   model: {
     id: undefined,
   },
   items: [
     {
-      field: "title",
-      label: "分组名称",
+      field: "name",
+      label: "名称",
       type: "input",
     },
+    {
+      field: "code",
+      label: "唯一编码",
+      type: "input",
+    },
+    {
+      field: "description",
+      label: "备注信息",
+      type: "textarea",
+    },
   ],
   submit: async ({ model }) => {
+    let res;
     if (model.id) {
-      const item = list.value.find((i) => i.id === model.id);
-      if (item) {
-        item.title = model.title;
-      }
+      res = await api.dictType.setDictType(model.id, model);
     } else {
-      const ids = list.value.map((i) => i.id);
-      const maxId = Math.max.apply(null, ids);
-      list.value.push({
-        id: maxId,
-        title: model.title,
-        count: 0,
-      });
+      res = await api.dictType.addDictType(model);
     }
+    updateDictTypes();
+    return res;
   },
 });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.active {
+  color: rgb(var(--primary-6));
+  background-color: rgb(var(--primary-1));
+}
+</style>
diff --git a/src/pages/system/dict/index.vue b/src/pages/system/dict/index.vue
index daecd76..1cc05ba 100644
--- a/src/pages/system/dict/index.vue
+++ b/src/pages/system/dict/index.vue
@@ -3,56 +3,125 @@
     <div class="py-2 px-4 bg-white">
       <bread-crumb></bread-crumb>
     </div>
-    <div class="grid grid-cols-[auto_auto_1fr] h-full overflow-hidden bg-white p-4 m-4 rounded">
+    <div class="grid grid-cols-[auto_1fr] gap-4 overflow-hidden bg-white p-4 m-4 rounded">
       <div>
-        <ani-group></ani-group>
+        <ani-group :current="current" @change="onTypeChange"></ani-group>
       </div>
-      <a-divider direction="vertical"></a-divider>
       <div>
+        <a-alert :show-icon="false" class="mb-3 !border-brand-500">
+          <span class="text-brand-500 font-bold">{{ current?.name }}</span>
+          <div class="mt-1">描述：{{ current?.description }}</div>
+        </a-alert>
         <dict-table></dict-table>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
+import { DictType, api } from "@/api";
 import aniGroup from "./components/group.vue";
-import { useAniTable, useForm, Form } from "@/components";
+import { useAniTable, createColumn, updateColumn } from "@/components";
 
-const form = useForm({
-  items: [
-    {
-      field: "字典名",
-      label: "字典名",
-      type: "input",
-    },
-    {
-      field: "字典名",
-      label: "",
-      type: "submit",
-    },
-  ],
-});
+const current = ref<DictType>();
+const onTypeChange = (item: DictType) => {
+  current.value = item;
+  dict.refresh();
+};
 
 const [dictTable, dict] = useAniTable({
+  async data(search, paging) {
+    return api.dict.getDicts({ ...search, ...paging, typeId: current.value?.id } as any);
+  },
   columns: [
     {
-      title: "字典名",
+      title: "字典项",
       dataIndex: "name",
+      render: ({ record }) => {
+        return (
+          <div>
+            <div>
+              {record.name}: {record.code}
+            </div>
+            <div class="text-gray-400 text-xs">{record.description}</div>
+          </div>
+        );
+      },
     },
+    createColumn,
+    updateColumn,
     {
-      title: "字典值",
-      dataIndex: "name",
+      title: "操作",
+      type: "button",
+      width: 140,
+      buttons: [
+        {
+          type: "modify",
+          text: "修改",
+        },
+        {
+          type: "delete",
+          text: "删除",
+          onClick: ({ record }) => {
+            return api.dict.delDict(record.id);
+          },
+        },
+      ],
     },
   ],
-  create: {
+  search: {
+    button: false,
     items: [
       {
-        field: "字典名",
+        field: "name",
+        label: "名称",
+        type: "search",
+        searchable: true,
+        enterable: true,
+        nodeProps: {
+          placeholder: "字典名称",
+        },
+        itemProps: {
+          hideLabel: true,
+        },
+      },
+    ],
+  },
+  create: {
+    title: '新增字典',
+    model: {
+      typeId: undefined,
+    },
+    modalProps: {
+      width: 580,
+    },
+    items: [
+      {
+        field: "name",
         label: "字典名",
         type: "input",
       },
+      {
+        field: "code",
+        label: "字典指",
+        type: "input",
+      },
+      {
+        field: "description",
+        label: "备注",
+        type: "textarea",
+      },
     ],
+    submit: async ({ model }) => {
+      return api.dict.addDict({ ...model, typeId: current.value?.id });
+    },
+  },
+  modify: {
+    extend: true,
+    title: "修改字典",
+    submit: async ({ model }) => {
+      return api.dict.setDict(model.id, { ...model, typeId: current.value?.id });
+    },
   },
 });
 </script>
diff --git a/src/pages/system/menu/index.vue b/src/pages/system/menu/index.vue
index faf615c..ac72551 100644
--- a/src/pages/system/menu/index.vue
+++ b/src/pages/system/menu/index.vue
@@ -18,7 +18,6 @@ const menuArr = flatedMenus.map((i) => ({ label: i.title, value: i.id }));
 
 const expanded = ref(false);
 const toggleExpand = () => {
-  console.log(menu.tableRef.value);
   expanded.value = !expanded.value;
   menu.tableRef.value?.tableRef?.expandAll(expanded.value);
 };
@@ -64,12 +63,7 @@ const [menuTable, menu] = useAniTable({
                 <span>{record.name ?? "无"}</span>
                 <span class="text-gray-400 text-xs truncate">{id}</span>
               </div>
-              <a-switch checked-color="#3c9" size="small">
-                {{
-                  "checked-icon": () => <i class="icon-park-outline-check"></i>,
-                  "unchecked-icon": () => <i class="icon-park-outline-close"></i>,
-                }}
-              </a-switch>
+              <a-switch checked-color="#3c9" size="small"></a-switch>
             </div>
           </div>
         );
@@ -102,13 +96,6 @@ const [menuTable, menu] = useAniTable({
         },
       ],
     },
-    // {
-    //   title: "启用",
-    //   dataIndex: "createdAt",
-    //   width: 80,
-    //   align: "center",
-    //   render: ({ record }) => <a-switch checked-color="#3c9"></a-switch>,
-    // },
   ],
   search: {
     items: [
@@ -137,10 +124,9 @@ const [menuTable, menu] = useAniTable({
         initial: 0,
         label: "父级",
         type: "treeSelect",
-        async options(arg) {
+        async options() {
           const res = await api.menu.getMenus({ size: 0, tree: true });
           const data = res.data.data;
-          console.log(arg);
           return [
             {
               id: 0,
diff --git a/src/types/auto-component.d.ts b/src/types/auto-component.d.ts
index ce2c22d..62f3178 100644
--- a/src/types/auto-component.d.ts
+++ b/src/types/auto-component.d.ts
@@ -17,7 +17,6 @@ declare module '@vue/runtime-core' {
     ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
     ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-    ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
     ADivider: typeof import('@arco-design/web-vue')['Divider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
     ADrawer: typeof import('@arco-design/web-vue')['Drawer']
@@ -68,6 +67,7 @@ declare module '@vue/runtime-core' {
     Editor: typeof import('./../components/editor/index.vue')['default']
     Header: typeof import('./../components/editor/panel-main/components/header.vue')['default']
     ImagePicker: typeof import('./../components/editor/components/ImagePicker.vue')['default']
+    'Index.dev1': typeof import('./../components/breadcrumb/index.dev1.vue')['default']
     InputColor: typeof import('./../components/editor/components/InputColor.vue')['default']
     InputImage: typeof import('./../components/editor/components/InputImage.vue')['default']
     Marquee: typeof import('./../components/editor/blocks/text/marquee.vue')['default']
@@ -81,6 +81,7 @@ declare module '@vue/runtime-core' {
     Render: typeof import('./../components/editor/blocks/date/render.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    'Temp.dev1': typeof import('./../components/breadcrumb/temp.dev1.vue')['default']
     Texter: typeof import('./../components/editor/panel-main/components/texter.vue')['default']
     Toast: typeof import('./../components/toast/toast.vue')['default']
   }
diff --git a/src/utils/listToTree.ts b/src/utils/listToTree.ts
index 0a5d328..543411c 100644
--- a/src/utils/listToTree.ts
+++ b/src/utils/listToTree.ts
@@ -1,3 +1,11 @@
+/**
+ * 列表转树结构
+ * @param list 数组
+ * @param id ID key
+ * @param pid 父级key
+ * @param cid 子项key
+ * @returns
+ */
 export const listToTree = (list: any[], id = "id", pid = "parentId", cid = "children") => {
   const map = list.reduce((res, v) => ((res[v[id]] = v), res), {});
   return list.filter((item) => {
@@ -10,11 +18,18 @@ export const listToTree = (list: any[], id = "id", pid = "parentId", cid = "chil
   });
 };
 
-export function treeEach(tree: any[], fn: (item: any) => void) {
+/**
+ * 遍历树结构
+ * @param tree 数组
+ * @param fn 函数
+ * @param before 是否广度遍历
+ */
+export function treeEach(tree: any[], fn: (item: any) => void, before = true) {
   for (const item of tree) {
-    fn(item);
+    before && fn(item);
     if (item.children) {
       treeEach(item.children, fn);
     }
+    !before && fn(item);
   }
 }