perf: 代码优化 所有的 interface 类型命名

src/api/login/index.ts

@@ -10,7 +10,7 @@ export function getLoginCodeApi() {
 }
 
 /** 登录并返回 Token */
-export function loginApi(data: Login.ILoginRequestData) {
+export function loginApi(data: Login.LoginRequestData) {
   return request<Login.LoginResponseData>({
     url: "users/login",
     method: "post",

src/api/login/types/login.ts

@@ -1,4 +1,4 @@
-export interface ILoginRequestData {
+export interface LoginRequestData {
   /** admin 或 editor */
   username: "admin" | "editor"
   /** 密码 */
@@ -7,8 +7,8 @@ export interface ILoginRequestData {
   code: string
 }
 
-export type LoginCodeResponseData = IApiResponseData<string>
+export type LoginCodeResponseData = ApiResponseData<string>
 
-export type LoginResponseData = IApiResponseData<{ token: string }>
+export type LoginResponseData = ApiResponseData<{ token: string }>
 
-export type UserInfoResponseData = IApiResponseData<{ username: string; roles: string[] }>
+export type UserInfoResponseData = ApiResponseData<{ username: string; roles: string[] }>

src/api/table/index.ts

@@ -2,7 +2,7 @@ import { request } from "@/utils/service"
 import type * as Table from "./types/table"
 
 /** 增 */
-export function createTableDataApi(data: Table.ICreateTableRequestData) {
+export function createTableDataApi(data: Table.CreateTableRequestData) {
   return request({
     url: "table",
     method: "post",
@@ -19,7 +19,7 @@ export function deleteTableDataApi(id: string) {
 }
 
 /** 改 */
-export function updateTableDataApi(data: Table.IUpdateTableRequestData) {
+export function updateTableDataApi(data: Table.UpdateTableRequestData) {
   return request({
     url: "table",
     method: "put",
@@ -28,7 +28,7 @@ export function updateTableDataApi(data: Table.IUpdateTableRequestData) {
 }
 
 /** 查 */
-export function getTableDataApi(params: Table.IGetTableRequestData) {
+export function getTableDataApi(params: Table.GetTableRequestData) {
   return request<Table.GetTableResponseData>({
     url: "table",
     method: "get",

src/api/table/types/table.ts

@@ -1,15 +1,15 @@
-export interface ICreateTableRequestData {
+export interface CreateTableRequestData {
   username: string
   password: string
 }
 
-export interface IUpdateTableRequestData {
+export interface UpdateTableRequestData {
   id: string
   username: string
   password?: string
 }
 
-export interface IGetTableRequestData {
+export interface GetTableRequestData {
   /** 当前页码 */
   currentPage: number
   /** 查询条数 */
@@ -20,7 +20,7 @@ export interface IGetTableRequestData {
   phone?: string
 }
 
-export interface IGetTableData {
+export interface GetTableData {
   createTime: string
   email: string
   id: string
@@ -30,7 +30,7 @@ export interface IGetTableData {
   username: string
 }
 
-export type GetTableResponseData = IApiResponseData<{
+export type GetTableResponseData = ApiResponseData<{
-  list: IGetTableData[]
+  list: GetTableData[]
   total: number
 }>

src/components/Notify/NotifyList.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { type PropType } from "vue"
-import { type IListItem } from "./data"
+import { type ListItem } from "./data"
 
 const props = defineProps({
   list: {
-    type: Object as PropType<IListItem[]>,
+    type: Object as PropType<ListItem[]>,
     required: true
   }
 })

src/components/Notify/data.ts

@@ -1,4 +1,4 @@
-export interface IListItem {
+export interface ListItem {
   avatar?: string
   title: string
   datetime?: string
@@ -7,7 +7,7 @@ export interface IListItem {
   extra?: string
 }
 
-export const notifyData: IListItem[] = [
+export const notifyData: ListItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
     title: "V3 Admin Vite 上线啦",
@@ -23,7 +23,7 @@ export const notifyData: IListItem[] = [
   }
 ]
 
-export const messageData: IListItem[] = [
+export const messageData: ListItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
     title: "来自楚门的世界",
@@ -44,7 +44,7 @@ export const messageData: IListItem[] = [
   }
 ]
 
-export const todoData: IListItem[] = [
+export const todoData: ListItem[] = [
   {
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",

src/components/Notify/index.vue

@@ -3,14 +3,14 @@ import { ref, computed } from "vue"
 import { ElMessage } from "element-plus"
 import { Bell } from "@element-plus/icons-vue"
 import NotifyList from "./NotifyList.vue"
-import { type IListItem, notifyData, messageData, todoData } from "./data"
+import { type ListItem, notifyData, messageData, todoData } from "./data"
 
 type TabNameType = "通知" | "消息" | "待办"
 
-interface IDataItem {
+interface DataItem {
   name: TabNameType
   type: "primary" | "success" | "warning" | "danger" | "info"
-  list: IListItem[]
+  list: ListItem[]
 }
 
 /** 角标当前值 */
@@ -28,7 +28,7 @@ const popoverWidth = 350
 /** 当前 Tab */
 const activeName = ref<TabNameType>("通知")
 /** 所有数据 */
-const data = ref<IDataItem[]>([
+const data = ref<DataItem[]>([
   // 通知数据
   {
     name: "通知",

src/config/async-route.ts

@@ -1,5 +1,5 @@
 /** 动态路由配置 */
-interface IAsyncRouteSettings {
+interface AsyncRouteSettings {
   /**
    * 是否开启动态路由功能？
    * 1. 开启后需要后端配合，在查询用户详情接口返回当前用户可以用来判断并加载动态路由的字段（该项目用的是角色 roles 字段）
@@ -13,7 +13,7 @@ interface IAsyncRouteSettings {
   defaultRoles: Array<string>
 }
 
-const asyncRouteSettings: IAsyncRouteSettings = {
+const asyncRouteSettings: AsyncRouteSettings = {
   open: true,
   defaultRoles: ["DEFAULT_ROLE"]
 }

src/config/layout.ts

@@ -1,5 +1,5 @@
 /** 布局配置 */
-interface ILayoutSettings {
+interface LayoutSettings {
   /** 是否显示 Settings Panel */
   showSettings: boolean
   /** 是否显示标签栏 */
@@ -20,7 +20,7 @@ interface ILayoutSettings {
   showColorWeakness: boolean
 }
 
-const layoutSettings: ILayoutSettings = {
+const layoutSettings: LayoutSettings = {
   showSettings: true,
   showTagsView: true,
   fixedHeader: true,

src/hooks/useFetchSelect.ts

@@ -3,29 +3,29 @@ import { ref, onMounted } from "vue"
 type OptionValueType = string | number
 
 /** Select 需要的数据格式 */
-interface ISelectOption {
+interface SelectOption {
   value: OptionValueType
   label: string
   disabled?: boolean
 }
 
 /** 接口响应格式 */
-interface IApiData {
+interface ApiData {
   code: number
-  data: ISelectOption[]
+  data: SelectOption[]
   message: string
 }
 
 /** 入参格式，暂时只需要传递 api 函数即可 */
-interface IFetchSelectProps {
+interface FetchSelectProps {
-  api: () => Promise<IApiData>
+  api: () => Promise<ApiData>
 }
 
-export function useFetchSelect(props: IFetchSelectProps) {
+export function useFetchSelect(props: FetchSelectProps) {
   const { api } = props
 
   const loading = ref<boolean>(false)
-  const options = ref<ISelectOption[]>([])
+  const options = ref<SelectOption[]>([])
   const value = ref<OptionValueType>("")
 
   /** 调用接口获取数据 */

src/hooks/useFullscreenLoading.ts

@@ -5,11 +5,11 @@ const defaultOptions = {
   text: "加载中..."
 }
 
-interface ILoadingInstance {
+interface LoadingInstance {
   close: () => void
 }
 
-interface IUseFullscreenLoading {
+interface UseFullscreenLoading {
   <T extends (...args: any[]) => ReturnType<T>>(fn: T, options?: LoadingOptions): (
     ...args: Parameters<T>
   ) => Promise<ReturnType<T>> | ReturnType<T>
@@ -25,8 +25,8 @@ interface IUseFullscreenLoading {
  * @param options LoadingOptions
  * @returns Function 一个新的函数，去执行它吧
  */
-export const useFullscreenLoading: IUseFullscreenLoading = (fn, options = {}) => {
+export const useFullscreenLoading: UseFullscreenLoading = (fn, options = {}) => {
-  let loadingInstance: ILoadingInstance
+  let loadingInstance: LoadingInstance
   const showLoading = (options: LoadingOptions) => {
     loadingInstance = ElLoading.service(options)
   }

src/hooks/usePagination.ts

@@ -1,6 +1,6 @@
 import { reactive } from "vue"
 
-interface IDefaultPaginationData {
+interface DefaultPaginationData {
   total: number
   currentPage: number
   pageSizes: number[]
@@ -8,7 +8,7 @@ interface IDefaultPaginationData {
   layout: string
 }
 
-interface IPaginationData {
+interface PaginationData {
   total?: number
   currentPage?: number
   pageSizes?: number[]
@@ -17,7 +17,7 @@ interface IPaginationData {
 }
 
 /** 默认的分页参数 */
-const defaultPaginationData: IDefaultPaginationData = {
+const defaultPaginationData: DefaultPaginationData = {
   total: 0,
   currentPage: 1,
   pageSizes: [10, 20, 50],
@@ -25,7 +25,7 @@ const defaultPaginationData: IDefaultPaginationData = {
   layout: "total, sizes, prev, pager, next, jumper"
 }
 
-export function usePagination(initialPaginationData: IPaginationData = {}) {
+export function usePagination(initialPaginationData: PaginationData = {}) {
   /** 合并分页参数 */
   const paginationData = reactive({ ...defaultPaginationData, ...initialPaginationData })
   /** 改变当前页码 */

src/hooks/useTheme.ts

@@ -7,13 +7,13 @@ type DefaultThemeNameType = typeof DEFAULT_THEME_NAME
 /** 注册的主题名称, 其中 DefaultThemeNameType 是必填的 */
 export type ThemeName = DefaultThemeNameType | "dark" | "dark-blue"
 
-interface IThemeList {
+interface ThemeList {
   title: string
   name: ThemeName
 }
 
 /** 主题列表 */
-const themeList: IThemeList[] = [
+const themeList: ThemeList[] = [
   {
     title: "默认",
     name: DEFAULT_THEME_NAME

src/store/modules/app.ts

@@ -7,13 +7,13 @@ export enum DeviceType {
   Desktop
 }
 
-interface ISidebar {
+interface Sidebar {
   opened: boolean
   withoutAnimation: boolean
 }
 
 export const useAppStore = defineStore("app", () => {
-  const sidebar: ISidebar = reactive({
+  const sidebar: Sidebar = reactive({
     opened: getSidebarStatus() !== "closed",
     withoutAnimation: false
   })

src/store/modules/user.ts

@@ -6,7 +6,7 @@ import { useTagsViewStore } from "./tags-view"
 import { getToken, removeToken, setToken } from "@/utils/cache/cookies"
 import router, { resetRouter } from "@/router"
 import { loginApi, getUserInfoApi } from "@/api/login"
-import { type ILoginRequestData } from "@/api/login/types/login"
+import { type LoginRequestData } from "@/api/login/types/login"
 import { type RouteRecordRaw } from "vue-router"
 import asyncRouteSettings from "@/config/async-route"
 
@@ -23,7 +23,7 @@ export const useUserStore = defineStore("user", () => {
     roles.value = value
   }
   /** 登录 */
-  const login = (loginData: ILoginRequestData) => {
+  const login = (loginData: LoginRequestData) => {
     return new Promise((resolve, reject) => {
       loginApi({
         username: loginData.username,

src/views/login/index.vue

@@ -6,7 +6,7 @@ import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import { type FormInstance, FormRules } from "element-plus"
 import { getLoginCodeApi } from "@/api/login"
-import { type ILoginRequestData } from "@/api/login/types/login"
+import { type LoginRequestData } from "@/api/login/types/login"
 
 const router = useRouter()
 const loginFormRef = ref<FormInstance | null>(null)
@@ -16,7 +16,7 @@ const loading = ref(false)
 /** 验证码图片 URL */
 const codeUrl = ref("")
 /** 登录表单数据 */
-const loginForm: ILoginRequestData = reactive({
+const loginForm: LoginRequestData = reactive({
   username: "admin",
   password: "12345678",
   code: ""

src/views/table/element-plus/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive, ref, watch } from "vue"
 import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
-import { type IGetTableData } from "@/api/table/types/table"
+import { type GetTableData } from "@/api/table/types/table"
 import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
 import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue"
 import { usePagination } from "@/hooks/usePagination"
@@ -59,7 +59,7 @@ const resetForm = () => {
 //#endregion
 
 //#region 删
-const handleDelete = (row: IGetTableData) => {
+const handleDelete = (row: GetTableData) => {
   ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
@@ -75,7 +75,7 @@ const handleDelete = (row: IGetTableData) => {
 
 //#region 改
 const currentUpdateId = ref<undefined | string>(undefined)
-const handleUpdate = (row: IGetTableData) => {
+const handleUpdate = (row: GetTableData) => {
   currentUpdateId.value = row.id
   formData.username = row.username
   dialogVisible.value = true
@@ -83,7 +83,7 @@ const handleUpdate = (row: IGetTableData) => {
 //#endregion
 
 //#region 查
-const tableData = ref<IGetTableData[]>([])
+const tableData = ref<GetTableData[]>([])
 const searchFormRef = ref<FormInstance | null>(null)
 const searchData = reactive({
   username: "",

src/views/table/vxe-table/index.vue

@@ -21,7 +21,7 @@ defineOptions({
 })
 
 //#region vxe-grid
-interface IRowMeta {
+interface RowMeta {
   id: string
   username: string
   roles: string
@@ -141,7 +141,7 @@ const xGridOpt: VxeGridProps = reactive({
         crudStore.clearTable()
         return new Promise<any>((resolve: Function) => {
           let total = 0
-          let result: IRowMeta[] = []
+          let result: RowMeta[] = []
           /** 加载数据 */
           const callback = (res: GetTableResponseData) => {
             if (res && res.data) {
@@ -269,7 +269,7 @@ const crudStore = reactive({
   /** 清空表格数据 */
   clearTable: () => xGridDom.value?.reloadData([]),
   /** 点击显示弹窗 */
-  onShowModal: (row?: IRowMeta) => {
+  onShowModal: (row?: RowMeta) => {
     if (row) {
       crudStore.isUpdate = true
       xModalOpt.title = "修改用户"
@@ -325,7 +325,7 @@ const crudStore = reactive({
     }
   },
   /** 删除 */
-  onDelete: (row: IRowMeta) => {
+  onDelete: (row: RowMeta) => {
     const tip = `确定 <strong style='color:red;'>删除</strong> 用户 <strong style='color:#409eff;'>${row.username}</strong> ？`
     const config: ElMessageBoxOptions = {
       type: "warning",
@@ -350,7 +350,7 @@ const crudStore = reactive({
   },
   /** 删除后是否返回上一页 */
   afterDelete: () => {
-    const tableData: IRowMeta[] = xGridDom.value!.getData()
+    const tableData: RowMeta[] = xGridDom.value!.getData()
     const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams = xGridDom.value?.getProxyInfo()?.pager
     if (pager && pager.currentPage > 1 && tableData.length === 1) {
       --pager.currentPage

types/api.d.ts

@@ -1,5 +1,5 @@
 /** 所有 api 接口的响应数据都应该准守该格式 */
-interface IApiResponseData<T> {
+interface ApiResponseData<T> {
   code: number
   data: T
   message: string