### Project Installation and Running

Source: https://github.com/halseyspicy/geeker-admin/blob/master/README.md

Provides commands for cloning the project repository, installing dependencies using pnpm, running the development server, and building the project for different environments.

```bash
# 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

# Build for development
pnpm build:dev

# Build for testing
pnpm build:test

# Build for production
pnpm build:pro
```

--------------------------------

### Project Structure Overview

Source: https://github.com/halseyspicy/geeker-admin/blob/master/README.md

Illustrates the directory structure of the Geeker-Admin project, highlighting key folders and configuration files for better understanding of project organization.

```text
Geeker-Admin
├─ .husky                  # husky configuration files
├─ .vscode                 # VSCode recommended settings
├─ build                   # Vite configuration items
├─ public                  # Static resource files (this folder will not be packaged)
├─ src
│  ├─ api                  # API interface management
│  ├─ assets               # Static resource files
│  ├─ components           # Global components
│  ├─ config               # Global configuration items
│  ├─ directives           # Global directive files
│  ├─ enums                # Commonly used project enumerations
│  ├─ hooks                # Commonly used Hooks encapsulation
│  ├─ languages            # Language internationalization i18n
│  ├─ layouts              # Framework layout modules
│  ├─ routers              # Routing management
│  ├─ stores               # pinia store
│  ├─ styles               # Global style files
│  ├─ typings              # Global ts declaration
│  ├─ utils                # Commonly used tool libraries
│  ├─ views                # All project pages
│  ├─ App.vue              # Project main component
│  ├─ main.ts              # Project entry file
│  └─ vite-env.d.ts        # Specify ts recognition of vue
├─ .editorconfig           # Unified coding style for different editors
├─ .env                    # Common Vite configuration
├─ .env.development        # Development environment configuration
├─ .env.production         # Production environment configuration
├─ .env.test               # Test environment configuration
├─ .eslintignore           # Ignore Eslint verification
├─ .eslintrc.cjs           # Eslint verification configuration file
├─ .gitignore              # Ignore git submission
├─ .prettierignore         # Ignore Prettier formatting
├─ .prettierrc.cjs         # Prettier formatting configuration
├─ .stylelintignore        # Ignore stylelint formatting
├─ .stylelintrc.cjs        # stylelint style formatting configuration
├─ CHANGELOG.md            # Project update log
├─ commitlint.config.cjs   # git commit specification configuration
├─ index.html              # Entry html
├─ LICENSE                 # Open source license file
├─ lint-staged.config.cjs  # lint-staged configuration file
├─ package-lock.json       # Dependency package version lock
├─ package.json            # Dependency package management
├─ postcss.config.cjs      # postcss configuration
├─ README.md               # README introduction
├─ tsconfig.json           # typescript global configuration
└─ vite.config.ts          # vite global configuration file
```

--------------------------------

### Browser Support Information

Source: https://github.com/halseyspicy/geeker-admin/blob/master/README.md

Details the browser compatibility for Geeker-Admin, recommending Chrome for local development and specifying support for modern browsers while dropping IE.

```text
Browser Support:
- Local development recommends using the latest version of Chrome.
- Production environment supports modern browsers, IE browser is no longer supported.
```

--------------------------------

### Linting and Formatting Commands

Source: https://github.com/halseyspicy/geeker-admin/blob/master/README.md

Includes commands for performing ESLint checks, Prettier code formatting, and Stylelint style formatting to maintain code quality and consistency.

```bash
# ESLint code check
pnpm lint:eslint

# Prettier code formatting
pnpm lint:prettier

# Stylelint style formatting
pnpm lint:stylelint
```

--------------------------------

### Dynamic Theme Application

Source: https://github.com/halseyspicy/geeker-admin/blob/master/index.html

Applies dynamic styling to the loading animation and page background based on global state stored in local storage. It targets the loading dots and the HTML element to set colors and dark mode.

```javascript
const globalState = JSON.parse(window.localStorage.getItem("geeker-global"));
if (globalState) {
  const dot = document.querySelectorAll(".dot i");
  const html = document.querySelector("html");
  dot.forEach(item => (item.style.background = globalState.primary));
  if (globalState.isDark) html.style.background = "#141414";
}
```

--------------------------------

### Loading Animation CSS

Source: https://github.com/halseyspicy/geeker-admin/blob/master/index.html

Defines the styles and keyframe animations for a spinning dot loading indicator. It uses CSS variables for flexibility and includes animations for rotation and movement.

```css
html, body, #app { width: 100%; height: 100%; padding: 0; margin: 0; }
.loading-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.loading-box .loading-wrap { display: flex; align-items: center; justify-content: center; padding: 98px; }
.dot { position: relative; box-sizing: border-box; display: inline-block; width: 32px; height: 32px; font-size: 32px; transform: rotate(45deg); animation: ant-rotate 1.2s infinite linear; }
.dot i { position: absolute; display: block; width: 14px; height: 14px; background-color: #409eff; border-radius: 100%; opacity: 0.3; transform: scale(0.75); transform-origin: 50% 50%; animation: ant-spin-move 1s infinite linear alternate; }
.dot i:nth-child(1) { top: 0; left: 0; }
.dot i:nth-child(2) { top: 0; right: 0; animation-delay: 0.4s; }
.dot i:nth-child(3) { right: 0; bottom: 0; animation-delay: 0.8s; }
.dot i:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }
@keyframes ant-rotate { to { transform: rotate(405deg); } }
@keyframes ant-spin-move { to { opacity: 1; } }
```

--------------------------------

### Git Commit Command

Source: https://github.com/halseyspicy/geeker-admin/blob/master/README.md

A command to standardize the commit process, which automatically triggers lint:lint-staged before committing.

```bash
# Commit code (automatically executes lint:lint-staged before committing)
pnpm commit
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.