### Example Request with Interceptor

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/http-interceptor.md

Demonstrates making a GET request after the interceptor has been set up. The Authorization header is automatically included.

```typescript
import axios from 'axios';

// After interceptor is set up, all requests include the token
const response = await axios.get('/api/data');
// Authorization: Bearer <token> is automatically added
```

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

### Install Arco CLI and Initialize Project

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/README.md

Install the Arco CLI globally using npm and then initialize a new project with 'arco init'. This sets up the basic structure for your Arco Design Pro Vue application.

```bash
$ npm i arco-cli@latest pnpm -g

$ arco init my-project
```

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

### MockJS Setup Configuration

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Configures MockJS with a random delay for mock responses. This setup is typically done once at the application's initialization.

```typescript
import Mock from 'mockjs';

Mock.setup({
  timeout: '600-1000' // Random delay 600-1000ms
});
```

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

### Example Usage of Options Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Demonstrates how to create an array of `Options` for use in UI components like gender selection.

```typescript
const genderOptions: Options[] = [
  { value: 'male', label: 'Male' },
  { value: 'female', label: 'Female' }
];
```

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

### Error Handling Setup

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Sets up a global error handler to report application errors to a specified server endpoint.

```APIDOC
## Function: handleError

### Description
Setup global error handler that reports to server.

### Parameters
#### Path Parameters
- **Vue** (App) - Vue app instance
- **baseUrl** (string) - Error reporting endpoint base URL

### Behavior
- Sets `Vue.config.errorHandler`
- POST errors to `${baseUrl}/report-error`
- Includes error, instance, and info details

### Example
```typescript
import handleError from '@/utils/monitor';
import { createApp } from 'vue';

const app = createApp(App);
handleError(app, 'https://error-tracking.example.com');
```
```

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

### Admin Panel Example with v-permission

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/directives.md

Demonstrates conditional rendering of buttons and divs based on user roles using the v-permission directive. Includes examples for 'admin' only, 'admin' or 'moderator', all users ('*'), and specific user roles.

```vue
<template>
  <div class="admin-section">
    <h2>Admin Controls</h2>
    
    <!-- Only admin can delete -->
    <button v-permission="['admin']" @click="deleteUser">
      Delete User
    </button>
    
    <!-- Admin or moderator can edit -->
    <button v-permission="['admin', 'moderator']" @click="editUser">
      Edit User
    </button>
    
    <!-- All logged-in users can view -->
    <div v-permission="['*']">
      Public Dashboard
    </div>
    
    <!-- User only -->
    <div v-permission="['user', 'admin']">
      User Settings
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';

const userStore = useUserStore();

const deleteUser = () => {
  // Admin action
};

const editUser = () => {
  // Admin/moderator action
};
</script>
```

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

### Example: Reset Tab List

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Demonstrates how to reset the tab list to its default state using the `useTabBarStore` hook.

```typescript
const tabStore = useTabBarStore();

// Close all tabs except Dashboard
tabStore.resetTabList();
```

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

### Example Usage of Pagination Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Shows how to initialize a `Pagination` object with current page, page size, and total item count for UI components.

```typescript
const pagination: Pagination = {
  current: 1,
  pageSize: 20,
  total: 150
};
```

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

### Query Service List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/list-api.md

Fetches the service list and iterates through the response data to log the title and description of each service.

```typescript
import { queryTheServiceList } from '@/api/list';

const response = await queryTheServiceList();
const services = response.data;
services.forEach(service => {
  console.log(`${service.title}: ${service.description}`);
});
```

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

### Example Usage of GeneralChart Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Provides an example of `GeneralChart` data structure, showing X-axis labels and multiple data series with their respective values.

```typescript
const chartData: GeneralChart = {
  xAxis: ['Jan', 'Feb', 'Mar', 'Apr'],
  data: [
    { name: 'Series A', value: [120, 200, 150, 80] },
    { name: 'Series B', value: [90, 140, 200, 160] }
  ]
};
```

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

### Complete Login Flow Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/README.md

Demonstrates a complete login process including importing API and store, calling the login endpoint, saving the token, and fetching user information. Error handling for the login process is included.

```typescript
// 1. Import API and store
import { login } from '@/api/user';
import { useUserStore } from '@/store';

export default {
  setup() {
    const userStore = useUserStore();
    
    // 2. Call login endpoint
    const handleLogin = async (username: string, password: string) => {
      try {
        await userStore.login({ username, password });
        // Token is saved, user can navigate
        
        // 3. Fetch user info
        await userStore.info();
        console.log(userStore.name); // User name loaded
        
      } catch (error) {
        console.error('Login failed');
      }
    };
    
    return { handleLogin };
  }
};
```

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

### Setup Responsive Listener with useResponsive

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/hooks.md

Use this hook to set up listeners for window resize events. Pass `true` to `immediate` to check the device size on mount. It automatically updates the app store with device changes.

```typescript
import useResponsive from '@/hooks/responsive';

export default {
  setup() {
    // Setup responsive listener
    useResponsive(true); // Check immediately on mount
    
    // Automatically updates store with device changes
  }
};
```

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

### Setup Route Guards

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/router.md

Orchestrates and registers all route guards for the router, including page, login, and permission guards.

```typescript
import createRouteGuard from '@/router/guard';

createRouteGuard(router);
```

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

### Example AppRouteRecordRaw Configuration

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Illustrates how to configure a route record using the AppRouteRecordRaw type, including nested routes and meta information for authentication.

```typescript
const route: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'Dashboard',
  component: () => import('@/views/dashboard/index.vue'),
  meta: {
    requiresAuth: true,
    roles: ['*']
  },
  children: [
    {
      path: 'analytics',
      component: () => import('@/views/dashboard/analytics.vue')
    }
  ]
};
```

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

### Get Tab List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Retrieves the current list of open tabs from the tab bar store. Useful for iterating and displaying tab information.

```typescript
const tabStore = useTabBarStore();
const tabs = tabStore.getTabList;

tabs.forEach(tab => {
  console.log(`${tab.title} (${tab.name})`);
});
```

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

### Example Usage of TimeRanger Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Demonstrates creating a `TimeRanger` tuple with specific start and end dates, suitable for date range pickers.

```typescript
const dateRange: TimeRanger = [
  '2024-01-01',
  '2024-01-31'
];
```

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

### Example Usage in Components

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/http-interceptor.md

Illustrates making a POST request within a component after the interceptor is configured. The response data is already unwrapped.

```typescript
import axios from 'axios';
import type { HttpResponse } from '@/api/interceptor';

interface UserData {
  id: number;
  name: string;
}

// The interceptor has already set up authentication
const response = await axios.post<HttpResponse<UserData>>('/api/user/profile');
const userData = response.data; // Already unwrapped
```

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

### Submit Channel Form Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/form-api.md

Demonstrates how to submit channel form data using the submitChannelForm function. Includes type definition and error handling.

```typescript
import { submitChannelForm, UnitChannelModel } from '@/api/form';

const formData: UnitChannelModel = {
  // BaseInfoModel fields
  activityName: 'Summer Campaign 2024',
  channelType: 'email',
  promotionTime: ['2024-06-01', '2024-08-31'],
  promoteLink: 'https://example.com/campaign',
  
  // ChannelInfoModel fields
  advertisingSource: 'internal',
  advertisingMedia: 'email-newsletter',
  keyword: ['summer', 'sale', 'promotion'],
  pushNotify: true,
  advertisingContent: 'Special summer offers available now!'
};

try {
  const response = await submitChannelForm(formData);
  console.log('Form submitted successfully');
} catch (error) {
  console.error('Submission failed:', error.message);
}
```

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

### Query Inspection List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/list-api.md

Fetches the quality inspection list. The response data contains the inspection records.

```typescript
import { queryInspectionList } from '@/api/list';

const response = await queryInspectionList();
const inspections = response.data;
```

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

### Query Policy List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/list-api.md

Fetches a paginated list of policies with specified filters for content type and status. Logs the total number of policies and details of each policy found.

```typescript
import { queryPolicyList, PolicyParams } from '@/api/list';

const params: PolicyParams = {
  current: 1,
  pageSize: 20,
  status: 'online',
  contentType: 'img'
};

const response = await queryPolicyList(params);
console.log(`Total policies: ${response.data.total}`);
response.data.list.forEach(policy => {
  console.log(`${policy.name} (${policy.status})`);
});
```

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

### Get App Settings

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Retrieves a shallow copy of the current application settings. Useful for inspecting the current theme and layout configuration.

```typescript
const appStore = useAppStore();
const settings = appStore.appCurrentSetting;
console.log(settings.theme);
```

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

### Get Server Menu Configuration

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Retrieves the menu configuration loaded from the server. Use this for dynamic menu rendering based on backend data.

```typescript
const appStore = useAppStore();
const menus = appStore.appAsyncMenus;
// Use for dynamic menu rendering
```

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

### Basic useRequest Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/hooks.md

Fetches data using the useRequest hook. The API call is automatically triggered when the component mounts. Ensure the 'api' parameter is a function that returns a Promise.

```typescript
import { useRequest } from '@/hooks/request';
import { queryContentData } from '@/api/dashboard';

export default {
  setup() {
    // Bind API parameter
    const { loading, response } = useRequest(
      queryContentData,
      [] as any
    );
    
    // Auto-fetches on component mount
    return { loading, contentData: response };
  }
};
```

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

### Conditional Mocking Setup

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Sets up MockJS to be enabled only in development mode. This prevents mock data from being served in production builds.

```typescript
import setupMock from '@/utils/setup-mock';
import debug from '@/utils/env';

setupMock({
  mock: debug, // Only enable if not production
  setup() {
    // Register mock endpoints
  }
});
```

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

### Usage in Vue Components

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/profile-api.md

Demonstrates how to use the `useRequest` hook to fetch profile and operation log data within a Vue component's setup function. Includes handling loading states.

```javascript
import { useRequest } from '@/hooks/request';
import { queryProfileBasic, queryOperationLog } from '@/api/profile';

export default {
  setup() {
    // Fetch profile with loading state
    const { loading: profileLoading, response: profile } = useRequest(
      queryProfileBasic,
      {} as any
    );
    
    // Fetch operation logs
    const { loading: logsLoading, response: logs } = useRequest(
      queryOperationLog,
      [] as any
    );
    
    return { profile, logs, profileLoading, logsLoading };
  }
};
```

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

### Get App Device Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Retrieves the current device type, which can be 'desktop' or 'mobile'. Use this to apply responsive styling or behavior.

```typescript
const appStore = useAppStore();
if (appStore.appDevice === 'mobile') {
  // Apply mobile-specific styling
}
```

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

### Query Data Overview

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/visualization-api.md

Fetches a comprehensive overview of all data metrics, including category labels and series data. Use this to get a high-level summary of available data.

```typescript
import { queryDataOverview } from '@/api/visualization';

const response = await queryDataOverview();
const overview = response.data;

console.log('Categories:', overview.xAxis);
overview.data.forEach(series => {
  console.log(`${series.name}: total ${series.count} items`);
});
```

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

### Conditionally Setup Mock Data

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Use this function to conditionally enable mock data based on the 'mock' parameter. It only runs if the environment is not production. Ensure 'Mock' is available in the scope.

```typescript
import setupMock, { successResponseWrap } from '@/utils/setup-mock';

setupMock({
  setup() {
    Mock.mock('/api/data', 'get', {
      // Mock response
    });
  }
});
```

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

### Example Usage of NodeOptions Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Illustrates creating a nested tree structure using the `NodeOptions` type, useful for representing geographical regions or organizational hierarchies.

```typescript
const treeOptions: NodeOptions[] = [
  {
    value: 'asia',
    label: 'Asia',
    children: [
      { value: 'china', label: 'China' },
      { value: 'japan', label: 'Japan' }
    ]
  }
];
```

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

### Get Menu List API Call

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/user-api.md

Retrieves the menu and route configuration for the current user based on permissions. Requires authentication and returns menu items.

```typescript
import { getMenuList } from '@/api/user';

const response = await getMenuList();
const menuRoutes = response.data;
// Use menuRoutes to construct dynamic navigation menu
```

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

### Role-Based UI with Directives and Hooks

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/README.md

Use the `v-permission` directive for element-level access control based on roles. Utilize the `usePermission` hook for more complex conditional rendering logic based on route access. The example also shows how to display content based on the current user's role from the store.

```vue
<template>
  <!-- Using directive for conditional rendering -->
  <button v-permission="['admin']" @click="deleteUser">
    Delete User (admin only)
  </button>
  
  <!-- Using hook for conditional display -->
  <div v-if="permission.accessRouter(route)">
    Access allowed
  </div>
  
  <!-- Using store for current role -->
  <span v-if="userStore.role === 'admin'">
    Current user is admin
  </span>
</template>

<script setup lang="ts">
import usePermission from '@/hooks/permission';
import { useUserStore } from '@/store';
import { useRoute } from 'vue-router';

const permission = usePermission();
const userStore = useUserStore();
const route = useRoute();
</script>
```

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

### Fresh Tab List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Replaces the entire tab list with a new set of tabs and updates the cache accordingly. This action clears existing tabs and cache, then rebuilds the cache based on the `ignoreCache` flag.

```typescript
const tabStore = useTabBarStore();

const newTabs: TagProps[] = [
  { title: 'Dashboard', name: 'dashboard', fullPath: '/dashboard' },
  { title: 'Profile', name: 'profile', fullPath: '/profile' }
];

tabStore.freshTabList(newTabs);
```

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

### Mocking a Successful API Response

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Example of mocking a POST request to '/api/user/info' using MockJS and a success response wrapper. This is useful for simulating successful data retrieval.

```typescript
import { successResponseWrap } from '@/utils/setup-mock';

Mock.mock('/api/user/info', 'post', successResponseWrap({
  name: 'John Doe',
  role: 'admin'
}));
```

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

### Submit Channel Form in Vue Component

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/form-api.md

Shows how to integrate the submitChannelForm function within a Vue component's setup function, including loading state management.

```typescript
import { ref } from 'vue';
import { submitChannelForm, UnitChannelModel } from '@/api/form';

export default {
  setup() {
    const loading = ref(false);
    
    const handleSubmit = async (formData: UnitChannelModel) => {
      loading.value = true;
      try {
        await submitChannelForm(formData);
        // Show success message
      } catch (error) {
        // Show error message
      } finally {
        loading.value = false;
      }
    };
    
    return { handleSubmit, loading };
  }
};
```

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

### useResponsive Hook

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/hooks.md

Composable for responsive behavior setup. It listens to window resize events and updates the app store device state. The hook uses 992px as the mobile breakpoint and is debounced at 100ms.

```APIDOC
## useResponsive Hook

### Description
Composable for responsive behavior setup. It listens to window resize events and updates the app store device state. The hook uses 992px as the mobile breakpoint and is debounced at 100ms.

### Function Signature
```typescript
export default function useResponsive(immediate?: boolean): void
```

### Parameters
#### Path Parameters
- **immediate** (boolean) - Optional - Check device size on mount. Defaults to `false`.

### Behavior
- Listens to window resize events
- Updates app store device state
- Uses 992px as mobile breakpoint (Arco Design standard)
- Debounced at 100ms to avoid excessive updates

### Example
```typescript
import useResponsive from '@/hooks/responsive';

export default {
  setup() {
    // Setup responsive listener
    useResponsive(true); // Check immediately on mount
    
    // Automatically updates store with device changes
  }
};
```

### Mobile Detection
Devices with width < 992px are considered mobile:

```typescript
const WIDTH = 992;
const isMobile = window.innerWidth - 1 < WIDTH;
```
```

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

### Preview Project

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/INDEX.md

Execute the preview script to serve a local version of the built project for testing.

```bash
npm run preview
```

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

### Get Cache List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Retrieves the list of route names that are currently set to be cached. This is typically used with the KeepAlive component in Vue.

```typescript
const tabStore = useTabBarStore();
const cached = tabStore.getCacheList;
console.log('Cached routes:', cached);
// Used in <KeepAlive> component
```

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

### Build Project

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/INDEX.md

Run the build script to compile and package the project for deployment.

```bash
npm run build
```

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

### Component Usage with useRequest

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/message-api.md

Demonstrates how to use the `useRequest` hook to fetch message and chat data within a Vue component setup function, including automatic loading state management.

```typescript
import { useRequest } from '@/hooks/request';
import { queryMessageList, queryChatList } from '@/api/message';

export default {
  setup() {
    // Fetch messages with automatic loading state
    const { loading, response: messages } = useRequest(
      queryMessageList,
      [] as any
    );
    
    // Fetch chat history
    const { loading: chatLoading, response: chatHistory } = useRequest(
      queryChatList,
      [] as any
    );
    
    return { messages, chatHistory, loading, chatLoading };
  }
};
```

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

### Example Error Handling for API Responses

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/http-interceptor.md

Shows how to handle API responses, including unwrapping data on success and catching errors. Errors trigger notifications and potential modal dialogs for specific codes.

```typescript
import axios from 'axios';

try {
  const response = await axios.get<HttpResponse<DataType>>('/api/data');
  // response is already unwrapped, just access the data
  const data = response.data;
} catch (error) {
  // Error message already shown via notification
  console.error(error.message);
}
```

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

### setupMock

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Conditionally sets up mock data based on the environment. It only runs if the environment is not production.

```APIDOC
## Function: default

### Description
Conditionally setup mock data based on environment.

### Parameters
#### Object Parameter `options`
- **mock** (boolean) - Optional - Enable mock data. Defaults to true (not false).
- **setup** (function) - Required - Setup function to call.

### Environment
Only runs if not in production mode.

### Example
```typescript
import setupMock from '@/utils/setup-mock';

setupMock({
  setup() {
    Mock.mock('/api/data', 'get', {
      // Mock response
    });
  }
});
```
```

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

### Define HTTP GET Request Parameters Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Defines the structure for parameters used in HTTP GET requests. Note that the `body` is explicitly `null` for GET requests.

```typescript
export interface GetParams {
  body: null;
  type: string;
  url: string;
}
```

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

### Loading Application Settings

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Settings are loaded at application startup using the `useAppStore()` hook. Ensure the store is imported before accessing settings.

```typescript
import useAppStore from '@/store/modules/app';

const appStore = useAppStore();
// appStore now contains all settings from settings.json
```

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

### Get Authentication Token

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Retrieves the JWT authentication token from localStorage. Returns null if no token is found.

```typescript
import { getToken } from '@/utils/auth';

const token = getToken();
if (token) {
  console.log('User is authenticated');
}
```

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

### regexUrl

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

A regular expression constant used for validating URLs that start with http, https, or ftp protocols.

```APIDOC
## Constant: regexUrl

### Description
Regular expression for validating URLs (http/https/ftp).

### Signature
```typescript
export const regexUrl: RegExp
```

### Example
```typescript
import { regexUrl } from '@/utils/index';

const isValidUrl = regexUrl.test('https://example.com');
```
```

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

### useAppStore

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

The main Pinia store for managing application configuration and theme.

```APIDOC
## useAppStore

### Description
Pinia store for application configuration and theme management. Initialized from `src/config/settings.json` defaults.

### Source
`src/store/modules/app/index.ts:9`
```

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

### Create Router Instance

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/router.md

Sets up the main Vue Router instance with history mode, redirects, and a scroll behavior.

```typescript
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: 'login' },
    { path: '/login', name: 'login', component: LoginComponent, meta: { requiresAuth: false } },
    ...appRoutes,
    REDIRECT_MAIN,
    NOT_FOUND_ROUTE
  ],
  scrollBehavior() {
    return { top: 0 };
  }
})
```

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

### info Action

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Fetches user information from the server and populates the user state.

```APIDOC
## info Action

### Description
Fetch and populate user information from server.

### HTTP Details
Calls `getUserInfo()` from `src/api/user.ts` via POST `/api/user/info`

### Requires Authentication
Yes

### Example
```javascript
const userStore = useUserStore();

// Fetch user data from server
await userStore.info();
console.log(userStore.name); // Loaded from server
```
```

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

### fetchServerMenuConfig

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Fetches the menu configuration from the server and updates the application's state. Requires authentication.

```APIDOC
## fetchServerMenuConfig

### Description
Fetch menu configuration from server and update state.

### Method Signature
async fetchServerMenuConfig(): Promise<void>

### HTTP Details
Calls `getMenuList()` from `src/api/user.ts` via POST `/api/user/menu`

### Authentication
Requires Authentication: Yes

### Side Effects
- Shows notification during load
- Updates `serverMenu` state on success
- Shows error notification on failure

### Request Example
```typescript
const appStore = useAppStore();

// Load menu from server
try {
  await appStore.fetchServerMenuConfig();
  console.log('Menu loaded:', appStore.serverMenu.length, 'items');
} catch (error) {
  console.error('Failed to load menu');
}
```
```

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

### URL Validation Regex

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

This constant provides a regular expression for validating URLs that start with http, https, or ftp.

```typescript
import { regexUrl } from '@/utils/index';

const isValidUrl = regexUrl.test('https://example.com');
```

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

### queryProfileBasic

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/profile-api.md

Fetches the user's profile, including detailed video and audio configuration settings. Requires authentication.

```APIDOC
## GET /api/profile/basic

### Description
Fetch user's profile with media configuration settings.

### Method
GET

### Endpoint
/api/profile/basic

### Parameters

### Request Body

### Response
#### Success Response (200)
- **status** (number) - Profile status code
- **video** (object) - Video configuration details
  - **mode** (string) - Video mode (e.g., 'standard', 'hd')
  - **acquisition** (object) - Video input settings
    - **resolution** (string) - Input resolution (e.g., '1920x1080')
    - **frameRate** (number) - Input frame rate in fps
  - **encoding** (object) - Video output/encoding settings
    - **resolution** (string) - Output resolution
    - **rate** (object) - Bitrate settings (min/max/default)
      - **min** (number)
      - **max** (number)
      - **default** (number)
    - **frameRate** (number) - Output frame rate
    - **profile** (string) - Encoding profile
- **audio** (object) - Audio configuration details
  - **mode** (string) - Audio mode
  - **acquisition** (object) - Audio input settings
    - **channels** (number) - Number of input channels
  - **encoding** (object) - Audio encoding settings
    - **channels** (number) - Number of output channels
    - **rate** (number) - Audio bitrate in kbps
    - **profile** (string) - Audio encoding profile

### Request Example
```typescript
import { queryProfileBasic } from '@/api/profile';

const response = await queryProfileBasic();
const profile = response.data;

console.log('Video Resolution:', profile.video.encoding.resolution);
console.log('Audio Channels:', profile.audio.encoding.channels);
console.log('Video Bitrate:', profile.video.encoding.rate);
```

### Response Example
{
  "example": "{\"status\": 200, \"video\": { \"mode\": \"hd\", \"acquisition\": { \"resolution\": \"1920x1080\", \"frameRate\": 30 }, \"encoding\": { \"resolution\": \"1280x720\", \"rate\": { \"min\": 1000, \"max\": 5000, \"default\": 2500 }, \"frameRate\": 30, \"profile\": \"high\" } }, \"audio\": { \"mode\": \"stereo\", \"acquisition\": { \"channels\": 2 }, \"encoding\": { \"channels\": 2, \"rate\": 128, \"profile\": \"aac\" } }}"
```

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

### openWindow

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Opens a URL in a new window with optional configuration for window features like target, width, and height.

```APIDOC
## Function: openWindow

### Description
Opens a URL in a new window with optional parameters.

### Signature
```typescript
function openWindow(
  url: string,
  opts?: { target?: TargetContext; [key: string]: any }
): void
```

### Parameters
#### Path Parameters
- **url** (string) - Required - URL to open
- **opts** (object) - Optional - Window options
  - **opts.target** (string) - Optional - Default: '_blank'. Target: '_self', '_parent', '_blank', '_top'
  - **opts[key]** (any) - Optional - Additional window.open parameters

### Example
```typescript
import { openWindow } from '@/utils/index';

// Open in new tab
openWindow('https://example.com');

// Open with window features
openWindow('https://example.com', {
  target: '_blank',
  width: 800,
  height: 600
});
```
```

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

### Default Configuration Settings

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Shows the default configuration loaded from `src/config/settings.json`. This JSON object defines initial application settings such as theme, navbar visibility, and menu preferences.

```json
{
  "theme": "light",
  "colorWeak": false,
  "navbar": true,
  "menu": true,
  "topMenu": false,
  "hideMenu": false,
  "menuCollapse": false,
  "footer": true,
  "themeColor": "#165DFF",
  "menuWidth": 220,
  "globalSettings": false,
  "device": "desktop",
  "tabBar": false,
  "menuFromServer": false,
  "serverMenu": []
}
```

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

### useTabBarStore

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Pinia store for tab navigation management. Initializes with a default cache list and a single default tab.

```APIDOC
## Store: useTabBarStore

```typescript
const useTabBarStore = defineStore('tabBar', { ... })
```

Pinia store for tab navigation management.

**Initial State:**
- `cacheTabList`: Set containing `DEFAULT_ROUTE_NAME` ('Workplace')
- `tagList`: Array with single `DEFAULT_ROUTE` entry
```

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

### Query Popular Authors

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/visualization-api.md

Fetches a ranking of the most popular authors. This function makes a GET request to /api/popular-author/list and returns a list of author metrics.

```typescript
import { queryPopularAuthor } from '@/api/visualization';

const response = await queryPopularAuthor();
const authors = response.data.list;

authors.forEach(author => {
  console.log(`#${author.ranking} ${author.author}`);
  console.log(`  Content: ${author.contentCount}, Clicks: ${author.clickCount}`);
});
```

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

### Delete Tag Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Closes a specific tab from the tab bar and removes it from the cache list. Requires the index and the tag object to be deleted.

```typescript
const tabStore = useTabBarStore();

// Close tab at index 2
const tabToDelete = tabStore.tagList[2];
tabStore.deleteTag(2, tabToDelete);
```

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

### Initialize User Store

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Instantiates the Pinia user store. The state is initialized with default values from UserState, with the role set to an empty string.

```typescript
const useUserStore = defineStore('user', { ... })
```

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

### Get User Info

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Retrieves a shallow copy of the current user's state. Use this getter to access the user's profile information.

```typescript
const userStore = useUserStore();
const currentUser = userStore.userInfo;
console.log(currentUser.name);
```

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

### Setting Environment Variables in .env Files

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Shows how to define environment-specific variables in .env files located at the project root. Different files (.env, .env.development, .env.production) can be used for specific environments.

```bash
# .env (all environments)
VITE_API_BASE_URL=http://localhost:3000

# .env.development
VITE_API_BASE_URL=http://localhost:3000

# .env.production
VITE_API_BASE_URL=https://api.example.com
```

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

### Get User Info API Call

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/user-api.md

Fetches the current authenticated user's information. Requires authentication and returns user profile data.

```typescript
import { getUserInfo } from '@/api/user';

const response = await getUserInfo();
const userInfo = response.data;
console.log(userInfo.name); // User's name
```

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

### Fetch Server Menu Configuration

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Fetches the menu configuration from the server and updates the application's state. This action requires authentication and provides feedback through notifications during the loading process. It updates the `serverMenu` state on success and shows an error notification on failure.

```typescript
const appStore = useAppStore();

// Load menu from server
try {
  await appStore.fetchServerMenuConfig();
  console.log('Menu loaded:', appStore.serverMenu.length, 'items');
} catch (error) {
  console.error('Failed to load menu');
}
```

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

### Delete Cache Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Removes a route from the cache list, allowing its component to be unmounted and garbage collected. Use this when a route no longer needs to be cached.

```typescript
const tabStore = useTabBarStore();
const tab = tabStore.tagList[0];

tabStore.deleteCache(tab);
// Component will no longer be cached
```

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

### appAsyncMenus Getter

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Retrieves the server-provided menu configuration.

```APIDOC
## appAsyncMenus Getter

### Description
Get server-provided menu configuration.

### Returns
Array of route records from server (`RouteRecordNormalized[]`).

### Example
```typescript
const appStore = useAppStore();
const menus = appStore.appAsyncMenus;
// Use for dynamic menu rendering
```

### Source
`src/store/modules/app/index.ts:19`
```

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

### Add Cache Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Adds a specific route name to the cache list, ensuring its component will be kept in memory. Use this when a route needs to be cached.

```typescript
const tabStore = useTabBarStore();

tabStore.addCache('dashboard');
// Component will be cached
```

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

### Query User Profile Basic

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/profile-api.md

Fetches the user's profile with media configuration settings. Requires authentication. Returns a promise resolving to ProfileBasicRes.

```typescript
import { queryProfileBasic } from '@/api/profile';

const response = await queryProfileBasic();
const profile = response.data;

console.log('Video Resolution:', profile.video.encoding.resolution);
console.log('Audio Channels:', profile.audio.encoding.channels);
console.log('Video Bitrate:', profile.video.encoding.rate);
```

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

### Query Content Publish Statistics

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/visualization-api.md

Fetches content publishing statistics over time. This function makes a GET request to /api/content-publish and returns an array of ContentPublishRecord objects.

```typescript
import { queryContentPublish } from '@/api/visualization';

const response = await queryContentPublish();
const publications = response.data;

publications.forEach(pub => {
  console.log(`${pub.name}: ${pub.y.length} data points`);
});
```

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

### App Store Usage in Components

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Demonstrates how to use the `useAppStore` hook within Vue components to manage reactive theme switching and handle responsive behavior by toggling device types.

```typescript
import { useAppStore } from '@/store';

export default {
  setup() {
    const appStore = useAppStore();
    
    // Reactive theme switching
    const isDarkMode = computed(() => appStore.theme === 'dark');
    
    const toggleDarkMode = () => {
      appStore.toggleTheme(!isDarkMode.value);
    };
    
    // Responsive behavior
    const handleResize = () => {
      const isMobile = window.innerWidth < 992;
      appStore.toggleDevice(isMobile ? 'mobile' : 'desktop');
    };
    
    return { isDarkMode, toggleDarkMode, handleResize };
  }
};
```

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

### App Store Definition

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Defines the Pinia store for managing application configuration and theme. State is initialized from settings.json.

```typescript
const useAppStore = defineStore('app', { ... })
```

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

### ECharts Component Imports

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Manually import only necessary ECharts components and renderers to minimize bundle size. This example shows imports for common chart types and components.

```typescript
use([
  CanvasRenderer,
  BarChart, LineChart, PieChart, RadarChart,
  GridComponent, TooltipComponent, LegendComponent,
  DataZoomComponent, GraphicComponent
]);
```

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

### Query My Project List

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/user-center-api.md

Fetches a list of projects associated with the current user. Use this to display or manage user's projects.

```typescript
import { queryMyProjectList } from '@/api/user-center';

const response = await queryMyProjectList();
const projects = response.data;

projects.forEach(project => {
  console.log(`${project.name} (${project.peopleNumber} members)`);
  project.contributors.forEach(contributor => {
    console.log(`  - ${contributor.name}`);
  });
});
```

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

### appCurrentSetting Getter

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Retrieves a shallow copy of the current application settings.

```APIDOC
## appCurrentSetting Getter

### Description
Get a copy of current application settings.

### Returns
Shallow copy of app state (`AppState`).

### Example
```typescript
const appStore = useAppStore();
const settings = appStore.appCurrentSetting;
console.log(settings.theme);
```

### Source
`src/store/modules/app/index.ts:13`
```

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

### Update Tab List Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-tab-bar.md

Adds a new tab to the tab bar when a user navigates to a new route. This action is typically called automatically by the router guard.

```typescript
const tabStore = useTabBarStore();
const route = useRoute();

// Called automatically by router guard
tabStore.updateTabList(route);
```

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

### Permission Directive Error Message Example

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/directives.md

Shows the error message thrown when the v-permission directive is used incorrectly without an array. Emphasizes the requirement for array syntax.

```typescript
// Throws:
// Error: need roles! Like v-permission="['admin','user']"
```

```vue
<!-- ❌ Wrong -->
<div v-permission="'admin'"></div>

<!-- ✅ Correct -->
<div v-permission="['admin']"></div>
```

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

### Toggle Theme

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/INDEX.md

Switches the application theme between light and dark modes. Requires importing useAppStore.

```typescript
const appStore = useAppStore();

appStore.toggleTheme(true);  // Dark
appStore.toggleTheme(false); // Light
```

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

### Define Date Range Type

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/types.md

Defines a `TimeRanger` as a tuple of two strings, representing the start and end dates for a range. Values should be ISO date strings or timestamps.

```typescript
export type TimeRanger = [string, string]
```

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

### Basic Navigation with useRouter

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/router.md

Use `useRouter` to programmatically navigate between routes. Supports named routes and passing query parameters.

```typescript
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    const goToDashboard = () => {
      router.push({ name: 'Dashboard' });
    };
    
    const goWithQuery = () => {
      router.push({
        name: 'SearchTable',
        query: { page: 1, sort: 'date' }
      });
    };
    
    return { goToDashboard, goWithQuery };
  }
};
```

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

### Run Linting

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/INDEX.md

Execute the linting script to enforce code style and identify potential code quality issues.

```bash
npm run lint
```

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

### login

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Authenticates a user with provided credentials and stores the authentication token. It handles token persistence and provides feedback on success or failure.

```APIDOC
## login

### Description
Authenticates user with credentials and saves token.

### Method
POST

### Endpoint
/api/user/login

### Parameters
#### Request Body
- **loginForm** (LoginData) - Required - Username and password

### Request Example
```json
{
  "username": "admin",
  "password": "password123"
}
```

### Response
#### Success Response (200)
- **void**

### Throws
Rejects promise on login failure.
```

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

### toggleDevice Action

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Updates the device type for responsive behavior.

```APIDOC
## toggleDevice Action

### Description
Update device type for responsive behavior.

### Parameters
- **device** (string) - 'desktop' or 'mobile'.

### Example
```typescript
const appStore = useAppStore();

appStore.toggleDevice('mobile');
// Triggers responsive layout changes
```

### Source
`src/store/modules/app/index.ts:41`
```

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

### POST /api/user/menu

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/user-api.md

Retrieves the menu and route configuration for the current user based on their permissions. Requires authentication.

```APIDOC
## POST /api/user/menu

### Description
Retrieves the menu and route configuration for the current user, typically fetched from the server based on user permissions. Requires authentication.

### Method
POST

### Endpoint
/api/user/menu

### Parameters
#### Request Headers
- **Authorization** (string) - Required - Bearer token for authentication

### Response
#### Success Response (200)
- **(RouteRecordNormalized[])** - Array of menu items and route configurations.

#### Response Example
```json
[
  {
    "name": "Dashboard",
    "path": "/dashboard"
  },
  {
    "name": "Settings",
    "path": "/settings"
  }
]
```
```

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

### Mocking an Error API Response

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/configuration.md

Example of mocking a POST request to '/api/invalid' that returns an error response using MockJS and a fail response wrapper. This is useful for testing error handling.

```typescript
import { failResponseWrap } from '@/utils/setup-mock';

Mock.mock('/api/invalid', 'post', failResponseWrap(
  null,
  'Invalid request',
  40000
));
```

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

### ProfileBasicRes Interface

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/profile-api.md

Defines the structure for user profile data, including video and audio configuration settings.

```typescript
export interface ProfileBasicRes {
  status: number;
  video: {
    mode: string;
    acquisition: {
      resolution: string;
      frameRate: number;
    };
    encoding: {
      resolution: string;
      rate: {
        min: number;
        max: number;
        default: number;
      };
      frameRate: number;
      profile: string;
    };
  };
  audio: {
    mode: string;
    acquisition: {
      channels: number;
    };
    encoding: {
      channels: number;
      rate: number;
      profile: string;
    };
  };
}
```

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

### Setup Global Error Handler

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/utilities.md

Configure a global error handler for your Vue application to report errors to a specified server endpoint. This function sets `Vue.config.errorHandler` and sends error details via POST requests.

```typescript
function handleError(
  Vue: App, 
  baseUrl: string
): void

// Behavior:
// - Sets `Vue.config.errorHandler`
// - POST errors to `${baseUrl}/report-error`
// - Includes error, instance, and info details
```

```typescript
import handleError from '@/utils/monitor';
import { createApp } from 'vue';

const app = createApp(App);
handleError(app, 'https://error-tracking.example.com');
```

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

### AppState Interface

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Defines the structure of the application state, including theme, layout options, and device information.

```APIDOC
## AppState Interface

### Description
Represents the state of the application, controlling various UI aspects and configurations.

### Fields
- **theme** (string) - Current theme ('light' or 'dark').
- **colorWeak** (boolean) - Enable weak color mode (accessibility).
- **navbar** (boolean) - Show/hide navbar.
- **menu** (boolean) - Show/hide sidebar menu.
- **topMenu** (boolean) - Enable top menu layout.
- **hideMenu** (boolean) - Hide menu (mobile responsive).
- **menuCollapse** (boolean) - Collapse menu to icons.
- **footer** (boolean) - Show/hide footer.
- **themeColor** (string) - Primary theme color (hex).
- **menuWidth** (number) - Menu sidebar width in pixels.
- **globalSettings** (boolean) - Show global settings panel.
- **device** (string) - Device type ('desktop' or 'mobile').
- **tabBar** (boolean) - Enable tab bar navigation.
- **menuFromServer** (boolean) - Load menu configuration from server.
- **serverMenu** (RouteRecordNormalized[]) - Server-provided menu/route config.
```

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

### queryMyProjectList

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/user-center-api.md

Fetch list of projects belonging to current user. Returns Promise resolving to project records.

```APIDOC
## POST /api/user/my-project/list

### Description
Fetch list of projects belonging to current user.

### Method
POST

### Endpoint
/api/user/my-project/list

### Request Body
This endpoint does not require a request body.

### Response
#### Success Response (200)
- **data** (array) - Array of MyProjectRecord objects.

### Response Example
```json
[
  {
    "id": 1,
    "name": "Arco Design Pro",
    "description": "A dashboard UI kit.",
    "peopleNumber": 5,
    "contributors": [
      {
        "name": "Alice",
        "email": "alice@example.com",
        "avatar": "http://example.com/avatar.png"
      }
    ]
  }
]
```
```

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

### resetInfo Action

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Resets the entire user state back to its initial default values.

```APIDOC
## resetInfo Action

### Description
Reset user state to initial default values.

### Example
```javascript
const userStore = useUserStore();

// Clear all user data
userStore.resetInfo();
console.log(userStore.name); // undefined
console.log(userStore.role); // ''
```
```

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

### updateSettings Action

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-app.md

Updates application settings with partial changes.

```APIDOC
## updateSettings Action

### Description
Update application settings with partial changes.

### Parameters
- **partial** (Partial<AppState>) - Fields to update.

### Example
```typescript
const appStore = useAppStore();

// Update multiple settings
appStore.updateSettings({
  theme: 'dark',
  menuWidth: 250,
  menuCollapse: true
});
```

### Source
`src/store/modules/app/index.ts:26`
```

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

### useThemes Hook

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/hooks.md

Composable for theme state detection and dark mode management.

```APIDOC
## useThemes Hook

### Description
Composable for theme state detection and dark mode management.

### Function Signature
```typescript
useThemes(): {
  isDark: ComputedRef<boolean>;
}
```

### Returns
- `isDark` (ComputedRef<boolean>): Indicates if the dark theme is active (reactive).

### Example
```typescript
import useThemes from '@/hooks/themes';

export default {
  setup() {
    const { isDark } = useThemes();
    
    return { isDark };
  }
};
```

### Template Example
```vue
<template>
  <div :class="{ 'dark-mode': isDark }">
    Content changes with theme
  </div>
</template>
```
```

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

### Initialize Error Handling

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/INDEX.md

Configure the global error handling mechanism by providing the application instance and the error logging endpoint.

```typescript
import handleError from '@/utils/monitor';

handleError(app, 'https://error-logging.example.com');
```

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

### Common Permission Patterns

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/directives.md

Provides common patterns for using the v-permission directive, including 'Admin Only', 'Staff' (multiple roles), and 'Wildcard' (all users). Note that guest content is typically handled by router guards, as the directive requires authentication.

```vue
<button v-permission="['admin']">Admin Action</button>
```

```vue
<button v-permission="['admin', 'moderator', 'staff']">Staff Action</button>
```

```vue
<button v-permission="['*']">Public Action</button>
```

```vue
<!-- Use router guards instead, directive requires authentication -->
<div>Not protected - visible to all users</div>
```

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

### Fetch User Information

Source: https://github.com/arco-design/arco-design-pro-vue/blob/main/_autodocs/api-reference/store-user.md

Asynchronously fetches and populates the user information from the server. This action requires authentication and calls the user API.

```typescript
const userStore = useUserStore();

// Fetch user data from server
await userStore.info();
console.log(userStore.name); // Loaded from server
```