### Install Dependencies

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Navigate to the project directory and install the necessary dependencies using pnpm.

```bash
cd naive-ui-admin

pnpm install
```

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

### Run Development Server

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Start the local development server to view and test the application.

```bash
pnpm run dev
```

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

### Dashboard Route Configuration Example

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Example of a dashboard route configuration in TypeScript, including meta information for title, icon, permissions, and sorting. It demonstrates nested routes with caching enabled for the console view.

```typescript
import { RouteRecordRaw } from 'vue-router';
import { Layout } from '@/router/constant';
import { DashboardOutlined } from '@vicons/antd';
import { renderIcon } from '@/utils/index';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    redirect: '/dashboard/console',
    component: Layout,
    meta: {
      title: 'Dashboard',
      icon: renderIcon(DashboardOutlined),
      permissions: ['dashboard_console', 'dashboard_monitor'], // 权限配置
      sort: 0,
    },
    children: [
      {
        path: 'console',
        name: 'dashboard_console',
        meta: {
          title: '主控台',
          permissions: ['dashboard_console'],
          keepAlive: true, // 缓存组件
        },
        component: () => import('@/views/dashboard/console/console.vue'),
      },
      {
        path: 'monitor',
        name: 'dashboard_monitor',
        meta: {
          title: '监控页',
          permissions: ['dashboard_monitor'],
        },
        component: () => import('@/views/dashboard/monitor/monitor.vue'),
      },
    ],
  },
];

export default routes;
```

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

### Clone Naive UI Admin Project

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Use this command to get the project code from the GitHub repository.

```bash
git clone https://github.com/jekip/naive-ui-admin.git
```

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

### Manage User State with useUserStore

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Demonstrates how to use the Pinia-based useUserStore to handle user authentication, token management, and fetching user information. It includes actions for login, getting user details, and logout, along with navigation logic.

```typescript
import { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

const userStore = useUserStore();
const router = useRouter();
const message = useMessage();

// 登录
async function handleLogin(loginForm) {
  try {
    const response = await userStore.login({
      username: loginForm.username,
      password: loginForm.password,
    });

    if (response.code === 200) {
      message.success('登录成功');
      // 获取用户权限信息
      await userStore.getInfo();
      // 跳转到首页
      router.push('/dashboard/console');
    } else {
      message.error(response.message || '登录失败');
    }
  } catch (error) {
    message.error('登录异常');
  }
}

// 获取用户信息
const token = userStore.getToken;
const username = userStore.getNickname;
const avatar = userStore.getAvatar;
const permissions = userStore.getPermissions;
const userInfo = userStore.getUserInfo;

// 登出
async function handleLogout() {
  await userStore.logout();
  router.push('/login');
}

// 检查登录状态
function checkLoginStatus() {
  if (!userStore.getToken) {
    router.push('/login');
  }
}
```

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

### BasicTable Component Setup

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Sets up the BasicTable component with column definitions, data request function, and action column configuration. Requires importing necessary components and hooks from Naive UI and custom modules.

```typescript
import { reactive, ref, h } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { getTableList } from '@/api/table/list';
import { useDialog, useMessage } from 'naive-ui';
import { DeleteOutlined, EditOutlined } from '@vicons/antd';

const message = useMessage();
const dialog = useDialog();
const actionRef = ref();

// 请求参数配置
const params = reactive({
  pageSize: 10,
  name: 'NaiveAdmin',
});

// 表格列配置
const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: '名称', key: 'name', width: 150 },
  { title: '地址', key: 'address' },
  { title: '开始日期', key: 'beginTime', width: 160 },
  { title: '结束日期', key: 'endTime', width: 160 },
];

// 操作列配置
const actionColumn = reactive({
  width: 180,
  title: '操作',
  key: 'action',
  fixed: 'right',
  align: 'center',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '删除',
          icon: DeleteOutlined,
          onClick: () => handleDelete(record),
          auth: ['basic_list'], // 权限控制
        },
        {
          label: '编辑',
          icon: EditOutlined,
          onClick: () => handleEdit(record),
          auth: ['basic_list'],
        },
      ],
    });
  },
});

// 数据请求函数
const loadDataTable = async (res) => {
  return await getTableList({ ...params, ...res });
};

// 选中行回调
function onCheckedRow(rowKeys) {
  console.log('选中行:', rowKeys);
}

// 删除操作
function handleDelete(record) {
  dialog.info({
    title: '提示',
    content: `您想删除 ${record.name}？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      message.success('删除成功');
      actionRef.value.reload(); // 刷新表格
    },
  });
}

// 编辑操作
function handleEdit(record) {
  console.log('编辑:', record);
  message.success('您点击了编辑按钮');
}
```

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

### Build for Production

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Generate a production-ready build of the application.

```bash
pnpm build
```

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

### Commit Changes

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Stage and commit your changes following the conventional commit format.

```bash
git commit -am 'feat(function): add xxxxx'
```

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

### Use API Functions in Components

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Demonstrates how to import and use the defined API functions (login, getUserInfo) within a Vue component. It includes basic error handling and success feedback using Naive UI's message component.

```typescript
import { login, getUserInfo } from '@/api/system/user';
import { useMessage } from 'naive-ui';

const message = useMessage();

async function handleLogin() {
  try {
    const response = await login({
      username: 'admin',
      password: '123456',
    });

    if (response.code === 200) {
      message.success('登录成功');
      // 获取用户信息
      const userInfo = await getUserInfo();
      console.log('用户信息:', userInfo);
    }
  } catch (error) {
    message.error('登录失败');
  }
}
```

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

### Push Branch

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

Push your new branch to the remote repository.

```bash
git push origin feat/xxxx
```

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

### Route Permission Filtering Logic

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

TypeScript code demonstrating the logic for filtering and setting up routes based on user permissions using `useAsyncRouteStore`. This involves generating accessible routes and dynamically adding them to the router.

```typescript
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';

const asyncRouteStore = useAsyncRouteStore();

// 根据用户权限生成可访问路由
async function setupRoutes(userInfo) {
  const routes = await asyncRouteStore.generateRoutes(userInfo);
  // 动态添加路由
  routes.forEach((route) => {
    router.addRoute(route);
  });
}
```

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

### Implement Permission Checks with usePermission Hook

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Shows how to use the usePermission hook to check user permissions. It supports checking for any, all, or some specific permissions and can be used with v-if directives or the v-permission directive for UI element control.

```typescript
import { usePermission } from '@/hooks/web/usePermission';

const { hasPermission, hasEveryPermission, hasSomePermission } = usePermission();

// 检查是否拥有任一权限（用于 v-if 显示逻辑）
const canViewDashboard = hasPermission(['dashboard_console', 'dashboard_monitor']);

// 检查是否拥有所有权限
const canManageAll = hasEveryPermission(['basic_list', 'basic_list_delete']);

// 检查是否拥有部分权限
const canEdit = hasSomePermission(['basic_list']);

// 在模板中使用
// <n-button v-if="hasPermission(['basic_list'])">编辑</n-button>
```

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

### Use Form Hook for Form Management

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Demonstrates the use of the useForm hook for creating and managing form instances in a Vue 3 application. It includes schema definition, form registration, submission handling, resetting, and dynamic field value setting. Requires 'naive-ui' and custom components like BasicForm.

```typescript
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { useMessage } from 'naive-ui';

// 定义表单 Schema 配置
const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'NInput',
    label: '姓名',
    labelMessage: '这是一个提示',
    giProps: { span: 1 },
    componentProps: {
      placeholder: '请输入姓名',
      onInput: (e: any) => console.log(e),
    },
    rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
  },
  {
    field: 'mobile',
    component: 'NInputNumber',
    label: '手机',
    componentProps: {
      placeholder: '请输入手机号码',
      showButton: false,
    },
  },
  {
    field: 'type',
    component: 'NSelect',
    label: '类型',
    componentProps: {
      placeholder: '请选择类型',
      options: [
        { label: '舒适性', value: 1 },
        { label: '经济性', value: 2 },
      ],
    },
  },
  {
    field: 'makeDate',
    component: 'NDatePicker',
    label: '预约时间',
    defaultValue: 1183135260000,
    componentProps: { type: 'date', clearable: true },
  },
  {
    field: 'makeProject',
    component: 'NCheckbox',
    label: '预约项目',
    componentProps: {
      options: [
        { label: '种牙', value: 1 },
        { label: '补牙', value: 2 },
        { label: '根管', value: 3 },
      ],
    },
  },
  {
    field: 'status',
    label: '状态',
    slot: 'statusSlot', // 使用插槽自定义渲染
  },
];

const message = useMessage();

// 使用 useForm Hook 创建表单实例
const [register, { setFieldsValue, getFieldsValue, resetFields, validate }] = useForm({
  gridProps: { cols: 1 },
  collapsedRows: 3,
  labelWidth: 120,
  layout: 'horizontal',
  submitButtonText: '提交预约',
  schemas,
});

// 提交处理
async function handleSubmit(values: Recordable) {
  try {
    await validate(); // 表单验证
    const formData = getFieldsValue(); // 获取表单值
    console.log('表单数据:', formData);
    message.success(JSON.stringify(values));
  } catch (error) {
    message.error('请填写完整信息');
  }
}

// 重置表单
function handleReset() {
  resetFields();
}

// 动态设置表单值
setFieldsValue({
  name: '张三',
  mobile: 13800138000,
  type: 1,
});

```

```vue
<template>
  <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
    <template #statusSlot="{ model, field }">
      <n-input v-model:value="model[field]" />
    </template>
  </BasicForm>
</template>
```

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

### useModal Hook Initialization

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Initializes the useModal hook to manage a modal dialog. It provides functions to register the modal, open, close, and set its properties programmatically. Requires importing the hook from '@/components/Modal'.

```typescript
import { useModal } from '@/components/Modal';
import { ref } from 'vue';

// 创建 Modal 实例
const [register, { openModal, closeModal, setProps, setSubLoading }] = useModal({
  title: '编辑用户',
  showIcon: false,
  closable: true,
});

const currentRecord = ref(null);

// 打开弹窗并传递数据
function handleEdit(record) {
  currentRecord.value = record;
  setProps({
    title: `编辑用户 - ${record.name}`,
    subBtuText: '保存修改',
  });
  openModal();
}

// 弹窗确认回调
async function handleOk() {
  try {
    setSubLoading(true);
    // 执行保存逻辑
    await saveUser(currentRecord.value);
    closeModal();
  } catch (error) {
    console.error('保存失败:', error);
  } finally {
    setSubLoading(false);
  }
}

// 弹窗关闭回调
function handleClose() {
  currentRecord.value = null;
}
```

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

### Create a New Feature Branch

Source: https://github.com/jekip/naive-ui-admin/blob/main/README.md

When contributing, create a new branch for your feature using Git.

```bash
git checkout -b feat/xxxx
```

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

### Control UI Elements with v-permission Directive

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Illustrates the usage of the v-permission directive in Vue templates to conditionally render or disable elements based on user permissions. It supports different effects like hiding or disabling.

```vue
<template>
  <!-- 使用 v-permission 指令控制按钮显示 -->
  <n-button v-permission="{ action: ['basic_list'] }">
    编辑（无权限时隐藏）
  </n-button>

  <!-- 禁用模式：无权限时按钮变为禁用状态 -->
  <n-button v-permission="{ action: ['basic_list_delete'], effect: 'disabled' }">
    删除（无权限时禁用）
  </n-button>

  <!-- 使用 hasPermission 函数控制显示 -->
  <n-button v-if="hasPermission(['dashboard_console'])">
    控制台
  </n-button>
</template>

<script setup>
import { usePermission } from '@/hooks/web/usePermission';
const { hasPermission } = usePermission();
</script>
```

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

### BasicTable Vue Template

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Vue template for rendering the BasicTable component. It configures the table with a title, columns, data request, row key, and action column, and listens for row selection events.

```vue
<template>
  <n-card :bordered="false" class="proCard">
    <BasicTable
      title="表格列表"
      titleTooltip="这是一个提示"
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      :scroll-x="1360"
      @update:checked-row-keys="onCheckedRow"
    />
  </n-card>
</template>
```

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

### useModal Vue Template

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Vue template for integrating with the useModal hook. It renders a BasicModal component and binds its registration and event handlers to the functions provided by the useModal hook.

```vue
<template>
  <BasicModal @register="register" @on-ok="handleOk" @on-close="handleClose">
    <n-form>
      <n-form-item label="用户名">
        <n-input v-model:value="currentRecord.name" />
      </n-form-item>
      <n-form-item label="邮箱">
        <n-input v-model:value="currentRecord.email" />
      </n-form-item>
    </n-form>
  </BasicModal>
</template>
```

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

### Define API Endpoints with Alova

Source: https://context7.com/jekip/naive-ui-admin/llms.txt

Defines various API endpoints for user-related operations like login, fetching user info, logout, password changes, and table data retrieval using Alova. Some requests are configured to return native responses.

```typescript
import { Alova } from '@/utils/http/alova/index';

// 用户登录
export function login(params) {
  return Alova.Post<InResult>(
    '/login',
    { params },
    {
      meta: {
        isReturnNativeResponse: true, // 返回原生响应
      },
    }
  );
}

// 获取用户信息
export function getUserInfo() {
  return Alova.Get<InResult>('/admin_info', {
    meta: {
      isReturnNativeResponse: true,
    },
  });
}

// 用户登出
export function logout(params) {
  return Alova.Post('/login/logout', { params });
}

// 修改密码
export function changePassword(params, uid) {
  return Alova.Post(`/user/u${uid}/changepw`, { params });
}

// 获取表格数据
export function getTableList(params) {
  return Alova.Get('/table/list', { params });
}
```

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