Geeker-Admin

Geeker-Admin is an open-source admin framework built with the following modern tech stack:

• Core: Vue 3.4, TypeScript, Vite 5, Pinia, Element-Plus.
• Components: Features a powerful ProTable component based on Element Plus where table pages are configured via Columns.
• State Management: Uses Pinia with a persistence plugin.
• Routing: VueRouter for dynamic route permission interception, lazy loading, and button-level permission control.
• Styling & UI: Supports multiple themes, dark mode, i18n (internationalization), and Element component size switching.
• Utilities: Custom Hooks, directives (permissions, copy, watermark, drag-and-drop, throttle, debounce, long press), and an encapsulated Axios instance for request interception and cancellation.
• Caching: Uses KeepAlive to support multi-level nested route caching.

Geeker-Admin uses ESLint, Prettier, and Stylelint to maintain code quality. Use these commands to check or format your code.

Code Linting and Formatting

# eslint 检测代码
pnpm lint:eslint

# prettier 格式化代码
pnpm lint:prettier

# stylelint 格式化样式
pnpm lint:stylelint

Follow these steps to set up the Geeker-Admin development environment locally.

1. Clone the repository

# Using Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git

# Or using GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git

2. Install dependencies

Use pnpm to install the required packages:

pnpm install

3. Run the project

To start the development server or serve the project:

pnpm dev
pnpm serve

# Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git
# GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git

pnpm install

pnpm dev
pnpm serve

Use the following commands to build the project for development, testing, or production environments.

# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro

Geeker-Admin uses commitlint and cz-git to enforce standardized commit messages. Running the commit command will automatically execute lint-staged before finalizing the commit.

# 提交代码（提交前会自动执行 lint:lint-staged 命令）
pnpm commit

The WangEditor component includes built-in support for custom media uploads via the editorConfig.MENU_CONF object. It uses internal uploadImg and uploadVideo API modules.

To customize the upload behavior, pass a MENU_CONF object in your editorConfig prop. The component expects the following structure for uploadImage and uploadVideo to handle the file upload and insertion via the provided insertFn callback.

The ProTable component is an advanced wrapper around el-table that provides integrated search forms, pagination, column settings, and drag-and-drop sorting. It supports both static data via the data prop and dynamic data via the requestApi prop.

Key Features:

• Automatic Data Fetching: If requestApi is provided, the table automatically fetches data on mount (controlled by requestAuto).
• Integrated Search: Automatically generates a SearchForm based on the search configuration within your columns.
• Column Management: Includes a ColSetting tool to show/hide columns.
• Selection & Radio: Built-in support for multiple selection (selection) and single selection (radio).
• Drag-and-Drop: Supports row reordering using sortablejs via the .move handle.

The TreeFilter component is a tree-based selection tool that supports both single-selection and multiple-selection modes. It can be populated either by passing a data array directly or by providing a requestApi function that returns a promise containing the tree data.

Key features include:

• Search/Filter: Built-in text input to filter tree nodes.
• Expand/Collapse All: A dropdown menu to toggle the expansion state of all nodes.
• Modes: Supports single selection (default) and multiple selection via the multiple prop.
• 'All' Option: Automatically prepends an "All" (全部) option to the data set when using requestApi or data props.

When using multiple mode, the component emits an array of checked keys. In single-selection mode, it emits the specific ID of the clicked node.

The Tabs component relies on Vue Router's meta field to determine how tabs are displayed and managed. You can control tab behavior by adding the following properties to your route definitions:

• isAffix: (boolean) If true, the tab is fixed and cannot be closed. It is initialized on startup.
• isFull: (boolean) If true, the route is treated as a full-page view and will not be added to the tabs list.
• isKeepAlive: (boolean) Determines if the component should be cached using <keep-alive>.
• icon: (string) The icon component/name to display in the tab.
• title: (string) The label text for the tab.
• isHide: (boolean) If true, the route is excluded from the fixed tabs initialization.

Understanding the project layout helps in navigating the source code:

• src/api: API interface management.
• src/components: Global components.
• src/config: Global configuration items.
• src/directives: Global custom directives.
• src/enums: Common project enums.
• src/hooks: Encapsulated common Hooks.
• src/languages: i18n language files.
• src/layouts: Framework layout modules.
• src/routers: Route management.
• src/stores: Pinia stores.
• src/styles: Global style files.
• src/typings: Global TypeScript declarations.
• src/utils: Common utility libraries.
• src/views: All project pages.
• build/: Vite configuration items.
• public/: Static assets (not included in the build).