# kxxs-admin-nuxt

**Repository Path**: east119/kxxs-admin-nuxt

## Basic Information

- **Project Name**: kxxs-admin-nuxt
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-14
- **Last Updated**: 2026-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 氪星小说管理后台 (Nuxt 4)

基于 Nuxt 4 + Vue 3 + Element Plus + Supabase 构建的管理后台系统。

## 技术栈

- **前端**: Nuxt 4, Vue 3, Element Plus
- **后端**: Nitro, Supabase (PostgreSQL)
- **部署**: Vercel

## 功能特性

- ✅ 用户认证（登录/登出）
- ✅ 仪表盘数据展示
- ✅ 用户管理（CRUD）
- ✅ 小说管理（CRUD）
- ✅ 分类管理
- ✅ 权限控制
- ✅ 响应式设计

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置环境变量

复制 `.env.example` 为 `.env` 并填写 Supabase 配置：

```bash
cp .env.example .env
```

编辑 `.env` 文件：

```env
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
```

### 3. 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 4. 构建生产版本

```bash
npm run build
```

## Supabase 数据库配置

### 用户表 (users)

```sql
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  username VARCHAR(100),
  role VARCHAR(20) DEFAULT 'user',
  status VARCHAR(20) DEFAULT 'active',
  avatar VARCHAR(500),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 启用 RLS
ALTER TABLE users ENABLE ROW LEVEL SECURITY;

-- 创建策略
CREATE POLICY "Users can view their own data" ON users
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Admins can view all users" ON users
  FOR SELECT USING (
    EXISTS (SELECT 1 FROM users WHERE id = auth.uid() AND role = 'admin')
  );
```

### 小说表 (novels)

```sql
CREATE TABLE novels (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title VARCHAR(255) NOT NULL,
  author VARCHAR(100),
  category_id UUID REFERENCES categories(id),
  description TEXT,
  cover VARCHAR(500),
  word_count INTEGER DEFAULT 0,
  view_count INTEGER DEFAULT 0,
  status VARCHAR(20) DEFAULT 'ongoing',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_novels_category ON novels(category_id);
CREATE INDEX idx_novels_status ON novels(status);
```

### 分类表 (categories)

```sql
CREATE TABLE categories (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name VARCHAR(100) NOT NULL,
  slug VARCHAR(100) UNIQUE,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
```

## 项目结构

```
kxxs-admin-nuxt/
├── pages/              # 页面组件
│   ├── login.vue       # 登录页
│   ├── dashboard/      # 仪表盘
│   ├── users/          # 用户管理
│   └── novels/         # 小说管理
├── layouts/            # 布局组件
│   └── default.vue     # 默认布局
├── middleware/         # 中间件
│   ├── auth.js         # 认证中间件
│   └── guest.js        # 访客中间件
├── plugins/            # 插件
│   └── supabase.js     # Supabase 客户端
├── composables/        # 组合式函数
│   └── useAuth.js      # 认证逻辑
├── public/             # 静态资源
├── nuxt.config.ts      # Nuxt 配置
└── package.json        # 依赖配置
```

## 部署到 Vercel

### 1. 推送代码到 Git

```bash
git init
git add .
git commit -m "Initial commit"
git push origin main
```

### 2. 在 Vercel 中导入项目

1. 访问 https://vercel.com
2. 点击 "Import Project"
3. 选择你的 Git 仓库
4. 配置环境变量：
   - `SUPABASE_URL`
   - `SUPABASE_ANON_KEY`
5. 点击 "Deploy"

### 3. 配置自定义域名（可选）

在 Vercel 项目设置中添加自定义域名。

## 默认管理员账号

需要在 Supabase 中手动创建：

```sql
INSERT INTO users (email, username, role, status)
VALUES ('admin@example.com', 'admin', 'admin', 'active');
```

然后使用 Supabase Auth 创建认证账号。

## 开发说明

### 添加新页面

在 `pages/` 目录下创建 `.vue` 文件：

```vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ['auth'] // 需要认证
})
</script>
```

### 使用 Supabase

在组件中使用：

```javascript
const { $supabase } = useNuxtApp()

const { data, error } = await $supabase
  .from('your_table')
  .select('*')
```

## License

MIT