58 Commits

Author SHA1 Message Date
f27b57ec8b 【改进】完善教程详情页 2025-11-04 10:47:29 +08:00
5e0773a59f 【改进】更换接口 2025-11-04 10:47:15 +08:00
70ea5f4dd4 【改进】完善APP隐私协议政策 2025-11-04 10:46:57 +08:00
31ea86d90c 【新增】封装时间工具 2025-11-04 10:46:10 +08:00
73dda8b648 【新增】反馈管理 2025-11-04 10:06:20 +08:00
80a60e37af 【优化】页面组件优化,提升加载速度 2025-11-04 00:00:51 +08:00
71885c8796 【优化】固件管理 2025-11-03 23:23:51 +08:00
bfbb94481f 【改进】教程列表 2025-11-03 23:23:30 +08:00
3dcf9ca3ef 【新增】新增隐私协议 2025-11-03 23:22:25 +08:00
2b92f29a17 【优化】教程分类以及教程 2025-11-03 18:41:15 +08:00
3dbfff5f41 【新增】单行字体省略 2025-11-03 18:19:06 +08:00
f04385a306 【新增】教程指南管理 2025-11-03 18:18:37 +08:00
44f817eced 【优化】优化用户管理界面 2025-11-03 11:43:37 +08:00
0f2cc6a33c 【新增】完善固件管理 2025-11-03 11:43:11 +08:00
0d1127f25e 【新增】完善用户管理 2025-11-03 10:40:53 +08:00
bb7b4035fc 【改进】表格样式优化 2025-11-03 10:40:09 +08:00
c3b3ed3681 【新增】封装提示框 2025-11-03 10:39:46 +08:00
3fe027661b 【新增】封装提示模态框 2025-11-03 10:39:36 +08:00
74034ed26a 【改进】主页动态化 2025-10-31 17:39:24 +08:00
ad98033faa 【新增】系统用户界面 2025-10-31 17:39:05 +08:00
bd8f47d9ae 【优化】仪表盘 2025-10-31 17:38:33 +08:00
c975c205df 【改进】消息结果集 2025-10-31 17:38:17 +08:00
3ead596483 【新增】固件管理路由 2025-10-31 17:37:40 +08:00
882df50f75 【新增】仪表盘 2025-10-31 17:37:16 +08:00
13da68b90d 【新增】系统菜单控制器 2025-10-31 17:36:51 +08:00
5f8bc1af55 【新增】系统设置 2025-10-31 17:36:23 +08:00
1391239193 【新增】用户修改密码 2025-10-31 17:35:39 +08:00
fe93d9fac0 【新增】用户管理 2025-10-31 17:35:19 +08:00
6ed65f89b5 【改进】区分模块 2025-10-31 17:33:25 +08:00
9ff5b98b05 【改进】区分模块DTO 2025-10-31 17:32:54 +08:00
461c390cf7 【新增】分页参数拦截封装 2025-10-31 17:31:21 +08:00
1b9c9e9b86 【新增】分页参数拦截封装 2025-10-31 17:31:01 +08:00
be30f31990 【优化】拦截地址 2025-10-31 10:13:52 +08:00
ac4d7d8176 【改进】菜单动态化 2025-10-31 10:13:34 +08:00
54997d4e3d 【新增】实体基类 2025-10-31 10:13:13 +08:00
7bbb1be2a2 【新增】首页样式封装 2025-10-31 10:12:31 +08:00
19312e7a6f 【新增】系统菜单 2025-10-31 10:12:00 +08:00
727dd254f0 【新增】封装axios 2025-10-31 10:11:33 +08:00
2942fdabfe 【优化】优化政策协议接口 2025-10-30 16:05:23 +08:00
5ea30d6f85 【新增】排除隐私政策接口拦截 2025-10-30 12:29:30 +08:00
e6ae7d60e3 【新增】隐私政策 2025-10-30 12:29:03 +08:00
cca1847fbf 【优化】路径 2025-10-30 10:27:52 +08:00
10a317bed6 【新增】接口注释 2025-10-30 10:20:39 +08:00
a3bf673440 Merge branch 'main' of http://120.24.204.180:3000/admin/core_wing_web 2025-10-30 09:55:37 +08:00
30c4ec612a Merge remote-tracking branch 'origin/main' 2025-10-30 09:50:14 +08:00
486455af81 Merge branch 'dev_20251030' 2025-10-30 09:49:24 +08:00
b6cdbba20a Merge pull request 'dev_20251029' (#3) from dev_20251029 into main
Reviewed-on: #3
2025-10-29 10:30:41 +00:00
bc77cd244b Merge pull request #5
dev_20251029
2025-10-29 18:26:53 +08:00
5306431417 Merge pull request #4
dev_20251029
2025-10-29 18:15:44 +08:00
53287f0a1d Merge pull request #3
dev_20251029
2025-10-29 18:12:57 +08:00
efbe2a3def Merge pull request 'dev_20251029' (#2) from dev_20251029 into main
Reviewed-on: #2
2025-10-29 08:59:47 +00:00
a1cbb9fdf0 Merge pull request #2 from MakeSomeFakeNews/dev_20251029
dev_20251029
2025-10-29 16:57:06 +08:00
a84e8b9fe6 Merge pull request '【优化】优化自增id' (#1) from dev_20251028 into main
Reviewed-on: #1
2025-10-28 08:39:06 +00:00
98052c0ce7 删除 .gitea/workflows/deploy.yml 2025-10-28 07:44:22 +00:00
3780b9d2ab 删除 .gitea/workflows/ci.yml
Some checks failed
Deploy to Server / build-and-deploy (push) Has been cancelled
2025-10-28 07:44:18 +00:00
bd43d35074 删除 .gitea/workflows/README.md
Some checks failed
Deploy to Server / build-and-deploy (push) Has been cancelled
CI Build and Test / build (push) Has been cancelled
2025-10-28 07:44:03 +00:00
085cd485ad 新增后台管理
Some checks failed
CI Build and Test / build (push) Has been cancelled
Deploy to Server / build-and-deploy (push) Has been cancelled
2025-10-28 15:40:06 +08:00
9007c7de57 Merge pull request #1 from MakeSomeFakeNews/dev_20251028
Dev 20251028
2025-10-28 15:37:05 +08:00
96 changed files with 7359 additions and 919 deletions

View File

@@ -1,211 +0,0 @@
# Gitea Actions 工作流配置说明
本项目配置了两个 Gitea Actions 工作流,用于自动化构建、测试和部署。
## 工作流列表
### 1. ci.yml - 持续集成
**触发时机:**
- 推送代码到 `main``master` 分支
- 创建 Pull Request
**执行内容:**
- 自动检出代码
- 配置 Java 8 环境
- 使用 Gradle 构建项目
- 运行单元测试
- 上传构建产物JAR 包)
- 上传测试报告
**查看结果:**
构建完成后,可以在 Gitea 仓库的 "Actions" 标签页查看运行结果和下载构建产物。
---
### 2. deploy.yml - 自动部署
**触发时机:**
- 推送代码到 `main``master` 分支
- 手动触发(在 Gitea Actions 页面点击 "Run workflow"
**执行内容:**
- 构建项目
- 通过 SCP 将 JAR 包上传到服务器
- 通过 SSH 重启应用
**配置步骤:**
#### 第一步:在 Gitea 中配置 Secrets
进入仓库 → Settings → Secrets添加以下密钥
| 密钥名称 | 说明 | 示例 |
|---------|------|------|
| `SERVER_HOST` | 服务器 IP 地址 | `120.24.204.180` |
| `SERVER_PORT` | SSH 端口 | `22` |
| `SERVER_USER` | SSH 用户名 | `root``ubuntu` |
| `SERVER_SSH_KEY` | SSH 私钥内容 | 完整的私钥文件内容 |
| `DEPLOY_PATH` | 部署目录路径 | `/opt/corewing` |
#### 第二步:生成 SSH 密钥对(如果还没有)
```bash
# 在本地生成密钥对
ssh-keygen -t rsa -b 4096 -C "gitea-deploy" -f ~/.ssh/gitea_deploy
# 查看公钥
cat ~/.ssh/gitea_deploy.pub
# 查看私钥(复制到 Gitea Secrets 中)
cat ~/.ssh/gitea_deploy
```
#### 第三步:配置服务器
```bash
# 1. SSH 登录到服务器
ssh user@your-server
# 2. 创建部署目录
sudo mkdir -p /opt/corewing
sudo chown $USER:$USER /opt/corewing
# 3. 添加公钥到 authorized_keys
echo "your-public-key-content" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
# 4. 安装 Java如果未安装
sudo apt update
sudo apt install openjdk-8-jdk -y
java -version
```
#### 第四步:测试部署
推送代码到 main 分支,或在 Gitea Actions 页面手动触发 deploy 工作流。
---
## 启用 Gitea Actions
### Gitea 服务器端配置
如果你的 Gitea 实例还未启用 Actions需要管理员配置
1. **修改 Gitea 配置文件** (`app.ini`)
```ini
[actions]
ENABLED = true
DEFAULT_ACTIONS_URL = https://gitea.com
```
2. **安装 Gitea Act Runner**
```bash
# 下载 Act Runner
wget https://dl.gitea.com/act_runner/0.2.6/act_runner-0.2.6-linux-amd64
chmod +x act_runner-0.2.6-linux-amd64
mv act_runner-0.2.6-linux-amd64 /usr/local/bin/act_runner
# 注册 Runner
act_runner register --no-interactive --instance http://120.24.204.180:3000 --token YOUR_RUNNER_TOKEN
# 启动 Runner
act_runner daemon
```
3. **获取 Runner Token**
- 登录 Gitea 管理后台
- 进入 Site Administration → Actions → Runners
- 点击 "Create new Runner" 获取 Token
---
## 自定义工作流
### 修改触发条件
可以根据需要修改工作流的触发条件:
```yaml
on:
push:
branches: [ main, develop ] # 监听多个分支
tags:
- 'v*' # 监听标签
schedule:
- cron: '0 0 * * *' # 定时执行(每天午夜)
```
### 添加环境变量
在工作流中使用环境变量:
```yaml
env:
JAVA_VERSION: '8'
SPRING_PROFILES_ACTIVE: 'prod'
steps:
- name: 运行应用
run: java -jar -Dspring.profiles.active=${{ env.SPRING_PROFILES_ACTIVE }} app.jar
```
### 添加通知
可以添加构建成功/失败通知:
```yaml
- name: 发送通知
if: failure()
run: |
curl -X POST "https://your-notification-webhook" \
-d "构建失败: ${{ github.repository }}"
```
---
## 常见问题
### 1. 工作流未触发?
- 检查 Gitea Actions 是否启用
- 检查 Act Runner 是否正常运行
- 确认触发条件是否匹配
### 2. 构建失败?
- 查看 Actions 日志获取详细错误信息
- 检查 Java 版本是否正确
- 确认依赖是否能正常下载
### 3. 部署失败?
- 检查 Secrets 配置是否正确
- 测试 SSH 连接是否正常
- 检查服务器目录权限
### 4. 如何查看日志?
- Gitea 仓库 → Actions 标签页
- 点击具体的工作流运行记录
- 展开各个步骤查看详细日志
---
## 最佳实践
1. **分支策略**
- `main` 分支自动部署到生产环境
- `develop` 分支自动部署到测试环境
- Pull Request 只执行构建和测试
2. **安全性**
- 不要在代码中硬编码密码和密钥
- 使用 Secrets 管理敏感信息
- 定期轮换 SSH 密钥
3. **性能优化**
- 启用 Gradle 缓存加快构建速度
- 使用 `build -x test` 跳过测试快速构建
- 合理设置产物保留时间
4. **监控**
- 定期检查工作流运行状态
- 设置构建失败通知
- 保存构建日志便于问题排查
---
## 更多资源
- [Gitea Actions 官方文档](https://docs.gitea.io/en-us/actions/)
- [GitHub Actions 语法参考](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions)Gitea Actions 兼容 GitHub Actions 语法)
- [Act Runner 项目](https://gitea.com/gitea/act_runner)

View File

@@ -1,55 +0,0 @@
name: CI Build and Test
# 触发条件:推送到 main 分支或创建 Pull Request
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
# 1. 检出代码
- name: 检出代码
uses: actions/checkout@v3
# 2. 设置 Java 环境
- name: 设置 Java 8
uses: actions/setup-java@v3
with:
java-version: '8'
distribution: 'temurin'
cache: 'gradle'
# 3. 赋予 Gradle wrapper 执行权限
- name: 赋予 Gradle wrapper 执行权限
run: chmod +x gradlew
# 4. 构建项目(跳过测试)
- name: 使用 Gradle 构建项目
run: ./gradlew build -x test
# 5. 运行测试
- name: 运行测试
run: ./gradlew test
# 6. 上传构建产物JAR 文件)
- name: 上传 JAR 包
uses: actions/upload-artifact@v3
if: success()
with:
name: corewing-app
path: build/libs/*.jar
retention-days: 7
# 7. 上传测试报告
- name: 上传测试报告
uses: actions/upload-artifact@v3
if: always()
with:
name: test-reports
path: build/reports/tests/
retention-days: 7

View File

@@ -1,80 +0,0 @@
name: Deploy to Server
# 触发条件:手动触发或推送到 main 分支
on:
push:
branches: [ main, master ]
workflow_dispatch: # 允许手动触发
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# 1. 检出代码
- name: 检出代码
uses: actions/checkout@v3
# 2. 设置 Java 环境
- name: 设置 Java 8
uses: actions/setup-java@v3
with:
java-version: '8'
distribution: 'temurin'
cache: 'gradle'
# 3. 赋予 Gradle wrapper 执行权限
- name: 赋予 Gradle wrapper 执行权限
run: chmod +x gradlew
# 4. 构建项目
- name: 构建项目
run: ./gradlew build -x test
# 5. 打包 JAR 文件
- name: 获取 JAR 文件名
id: jar
run: echo "jar_file=$(ls build/libs/*.jar | head -n 1)" >> $GITHUB_OUTPUT
# 6. 部署到服务器(使用 SCP
# 需要在 Gitea 仓库设置中配置以下 Secrets
# - SERVER_HOST: 服务器地址
# - SERVER_PORT: SSH 端口(默认 22
# - SERVER_USER: SSH 用户名
# - SERVER_SSH_KEY: SSH 私钥
# - DEPLOY_PATH: 部署路径(如 /opt/corewing
- name: 部署到服务器
uses: appleboy/scp-action@master
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USER }}
key: ${{ secrets.SERVER_SSH_KEY }}
port: ${{ secrets.SERVER_PORT }}
source: "build/libs/*.jar"
target: ${{ secrets.DEPLOY_PATH }}
strip_components: 2
# 7. 重启应用(通过 SSH 执行命令)
- name: 重启应用
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USER }}
key: ${{ secrets.SERVER_SSH_KEY }}
port: ${{ secrets.SERVER_PORT }}
script: |
cd ${{ secrets.DEPLOY_PATH }}
# 停止旧进程
pkill -f corewing || true
# 等待进程完全停止
sleep 3
# 启动新进程
nohup java -jar *.jar > app.log 2>&1 &
# 检查启动状态
sleep 5
if pgrep -f corewing > /dev/null; then
echo "应用启动成功"
else
echo "应用启动失败"
exit 1
fi

View File

@@ -54,6 +54,13 @@ public class Result<T> implements Serializable {
return new Result<>(200, I18nUtil.getMessage("common.success"), data, true);
}
/**
* 成功返回(自定义消息)
*/
public static <T> Result<T> success(String message) {
return new Result<>(200, message, null, true);
}
/**
* 成功返回(自定义消息和数据)
*/
@@ -81,4 +88,27 @@ public class Result<T> implements Serializable {
public static <T> Result<T> error(Integer code, String message) {
return new Result<>(code, message, null, false);
}
/**
* 根据状态返回信息结果
*/
public static <T> Result<T> isBool(boolean flag) {
return flag ? Result.success() : Result.error();
}
/**
* 根据状态返回信息结果(自定义成功消息)
*/
public static <T> Result<T> isBoolAsMsg(boolean flag, String successMsg) {
return flag ? Result.success(successMsg) : Result.error();
}
/**
* 根据状态返回信息结果(自定义消息)
*/
public static <T> Result<T> isBoolAsMsg(boolean flag, String successMsg, String errorMsg) {
return flag ? Result.success(successMsg) : Result.error(errorMsg);
}
}

View File

@@ -0,0 +1,37 @@
package com.corewing.app.common.base;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.Date;
@Data
public class BaseEntity {
/**
* 创建时间
*/
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
/**
* 创建人
*/
private String createBy;
/**
* 修改时间
*/
@TableField(fill = FieldFill.UPDATE)
private LocalDateTime updateTime;
/**
* 修改人
*/
private String updateBy;
/**
* 备注
*/
private String remark;
}

View File

@@ -0,0 +1,23 @@
package com.corewing.app.common.page;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
public class PageContext {
private static final ThreadLocal<Page<?>> PAGE_HOLDER = new ThreadLocal<>();
// 设置分页对象
public static void setPage(Page<?> page) {
PAGE_HOLDER.set(page);
}
// 泛型方法:获取指定类型的分页对象(消除警告)
@SuppressWarnings("unchecked")
public static <T> Page<T> getPage(Class<T> clazz) {
return (Page<T>) PAGE_HOLDER.get();
}
// 清除线程变量
public static void clear() {
PAGE_HOLDER.remove();
}
}

View File

@@ -0,0 +1,53 @@
package com.corewing.app.common.page;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class PageInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// 默认分页参数
int pageNum = 1;
int pageSize = 10;
// 从请求参数中获取分页信息
String current = request.getParameter("current");
String size = request.getParameter("size");
// 解析页码
if (current != null && !current.isEmpty()) {
try {
pageNum = Integer.parseInt(current);
if (pageNum < 1) pageNum = 1; // 页码不能小于1
} catch (NumberFormatException e) {
// 非法参数使用默认值
}
}
// 解析每页条数
if (size != null && !size.isEmpty()) {
try {
pageSize = Integer.parseInt(size);
if (pageSize < 1) pageSize = 10; // 每页条数不能小于1
if (pageSize > 100) pageSize = 100; // 限制最大条数
} catch (NumberFormatException e) {
// 非法参数使用默认值
}
}
// 创建 MyBatis-Plus 的 Page 对象并存储到 ThreadLocal
Page<?> page = new Page<>(pageNum, pageSize);
PageContext.setPage(page);
return true;
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
// 清除ThreadLocal中的数据防止内存泄漏
PageContext.clear();
}
}

View File

@@ -2,6 +2,7 @@ package com.corewing.app.config;
import cn.dev33.satoken.interceptor.SaInterceptor;
import cn.dev33.satoken.stp.StpUtil;
import com.corewing.app.common.page.PageInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@@ -17,6 +18,8 @@ public class SaTokenConfig implements WebMvcConfigurer {
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
// 分页参数拦截
registry.addInterceptor(new PageInterceptor());
// 注册 Sa-Token 拦截器,校验规则为 StpUtil.checkLogin() 登录校验。
registry.addInterceptor(new SaInterceptor(handle -> StpUtil.checkLogin()))
// 拦截所有路由
@@ -29,10 +32,14 @@ public class SaTokenConfig implements WebMvcConfigurer {
.excludePathPatterns("/feedback", "/feedback/**")
// 排除教程接口(支持匿名查询)
.excludePathPatterns("/tutorial", "/tutorial/**")
// 排除隐私政策接口(支持匿名查询)
.excludePathPatterns("/privacy_policy", "/privacy_policy/**")
// 排除固件查询接口(不需要登录)
.excludePathPatterns("/firmware/**")
// 排除系统登录页(不需要登录)
.excludePathPatterns("/loading.html", "/admin/login.html")
// 排除静态资源
.excludePathPatterns("/", "/loading.html", "/admin/login.html", "/*.css", "/*.js", "/*.ico", "/static/**")
.excludePathPatterns("/", "/*.css", "/*.js", "/*.ico", "/static/**", "/assets/**")
// 排除后台管理静态资源
.excludePathPatterns("/admin/**")
// 排除 Druid 监控

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -1,4 +1,4 @@
package com.corewing.app.dto;
package com.corewing.app.dto.api;
import lombok.Data;

View File

@@ -0,0 +1,11 @@
package com.corewing.app.dto.biz.feedback;
import lombok.Data;
import java.util.List;
@Data
public class FeedbackBatchDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,13 @@
package com.corewing.app.dto.biz.feedback;
import lombok.Data;
import java.util.List;
@Data
public class FeedbackBatchStatusRequest {
private List<Long> ids;
private Integer status;
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.dto.biz.firmware;
import lombok.Data;
import java.util.List;
@Data
public class FirmwareBatchDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,11 @@
package com.corewing.app.dto.biz.privacyPolicy;
import lombok.Data;
import java.util.List;
@Data
public class PrivacyPolicyBatchDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.dto.biz.tutorial;
import lombok.Data;
import java.util.List;
@Data
public class BatchTutorialDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.dto.biz.tutorial;
import lombok.Data;
import java.util.List;
@Data
public class CategoryBatchDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,12 @@
package com.corewing.app.dto.biz.user;
import lombok.Data;
import java.util.List;
@Data
public class BizUserBatchDeleteRequest {
private List<Long> ids;
}

View File

@@ -0,0 +1,8 @@
package com.corewing.app.dto.biz.user;
import lombok.Data;
@Data
public class BizUserIdRequest {
private long id;
}

View File

@@ -0,0 +1,11 @@
package com.corewing.app.dto.biz.user;
import lombok.Data;
import java.util.List;
@Data
public class BizUserStatusRequest {
private List<Long> ids;
private Integer status;
}

View File

@@ -0,0 +1,18 @@
package com.corewing.app.dto.biz.user;
import lombok.Data;
@Data
public class ResetPasswordRequest {
/**
* 用户id
*/
private Integer userId;
/**
* 新密码
*/
private String password;
}

View File

@@ -66,4 +66,34 @@ public class Feedback implements Serializable {
*/
@TableField(fill = FieldFill.INSERT_UPDATE)
private LocalDateTime updateTime;
/**
* 用户昵称
*/
@TableField(exist = false)
private String nickName;
/**
* 用户名
*/
@TableField(exist = false)
private String username;
@TableField(exist = false)
private String statusName;
public String getStatusName() {
switch (status) {
case 0:
return "待处理";
case 1:
return "处理中";
case 2:
return "已完成";
case 3:
return "已关闭";
default:
return "";
}
}
}

View File

@@ -61,4 +61,20 @@ public class Firmware implements Serializable {
*/
@TableField(fill = FieldFill.INSERT_UPDATE)
private LocalDateTime updateTime;
@TableField(exist = false)
private String firmwareTypeName;
public String getFirmwareTypeName() {
switch (firmwareType) {
case 1:
return "调参固件";
case 2:
return "AP固件";
case 3:
return "INAV固件";
default:
return "";
}
}
}

View File

@@ -0,0 +1,43 @@
package com.corewing.app.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.corewing.app.common.base.BaseEntity;
import lombok.Data;
import lombok.EqualsAndHashCode;
/**
* 隐私政策实体
*/
@EqualsAndHashCode(callSuper = true)
@Data
@TableName("app_privacy_policy")
public class PrivacyPolicy extends BaseEntity {
/**
* 隐私政策id
*/
@TableId(value = "id", type = IdType.AUTO)
private Long id;
/**
* 隐私政策名称
*/
private String title;
/**
* 隐私政策内容
*/
private String content;
/**
* 是否显示
*/
private Integer visible;
/**
* 排序
*/
private Integer sort;
}

View File

@@ -0,0 +1,57 @@
package com.corewing.app.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.corewing.app.common.base.BaseEntity;
import lombok.Data;
import lombok.EqualsAndHashCode;
import java.io.Serializable;
@EqualsAndHashCode(callSuper = true)
@Data
@TableName("sys_menu")
public class SysMenu extends BaseEntity implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 菜单id
*/
@TableId(value = "id", type = IdType.AUTO)
private Long id;
/**
* 菜单名称
*/
private String menuName;
/**
* 菜单地址
*/
private String menuUrl;
/**
* 菜单图标
*/
private String menuIcon;
/**
* 菜单分类
*/
private String menuCategory;
/**
* 是否隐藏
*/
private boolean visible;
/**
* 排序
*/
private int sort;
}

View File

@@ -0,0 +1,31 @@
package com.corewing.app.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.corewing.app.common.base.BaseEntity;
import lombok.Data;
import lombok.EqualsAndHashCode;
@EqualsAndHashCode(callSuper = true)
@Data
@TableName("sys_option")
public class SysOption extends BaseEntity {
/**
* 主键
*/
@TableId(value = "id", type = IdType.AUTO)
private Long id;
/**
* 键名
*/
private String key;
/**
* 键值
*/
private String value;
}

View File

@@ -1,8 +1,6 @@
package com.corewing.app.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
@@ -62,12 +60,23 @@ public class Tutorial implements Serializable {
/**
* 创建时间
*/
@TableField(fill = FieldFill.INSERT)
private Date createTime;
/**
* 更新时间
*/
@TableField(fill = FieldFill.UPDATE)
private Date updateTime;
/**
* 教程分类id
*/
@TableField(exist = false)
private Long categoryId;
@TableField(exist = false)
private String categoryName;
}

View File

@@ -1,12 +1,11 @@
package com.corewing.app.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.io.Serializable;
import java.time.LocalDateTime;
import java.util.Date;
/**
@@ -65,11 +64,16 @@ public class TutorialCategory implements Serializable {
/**
* 创建时间
*/
private Date createTime;
@TableField(fill = FieldFill.INSERT)
private LocalDateTime createTime;
/**
* 更新时间
*/
private Date updateTime;
@TableField(fill = FieldFill.UPDATE)
private LocalDateTime updateTime;
public static final String typeCategory = "category";
public static final String typeTag = "tag";
}

View File

@@ -25,6 +25,11 @@ public class User implements Serializable {
@TableId(value = "id", type = IdType.AUTO)
private Long id;
/**
* 用户昵称
*/
private String nickName;
/**
* 用户名
*/

View File

@@ -1,8 +1,10 @@
package com.corewing.app.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.entity.Feedback;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
/**
* 问题反馈 Mapper 接口
@@ -10,4 +12,5 @@ import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface FeedbackMapper extends BaseMapper<Feedback> {
Page<Feedback> page(Page<Feedback> page, @Param("feedback") Feedback feedback);
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.corewing.app.entity.PrivacyPolicy;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface PrivacyPolicyMapper extends BaseMapper<PrivacyPolicy> {
}

View File

@@ -0,0 +1,9 @@
package com.corewing.app.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.corewing.app.entity.SysMenu;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface SysMenuMapper extends BaseMapper<SysMenu> {
}

View File

@@ -0,0 +1,9 @@
package com.corewing.app.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.corewing.app.entity.SysOption;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface SysOptionMapper extends BaseMapper<SysOption> {
}

View File

@@ -13,5 +13,7 @@ import org.apache.ibatis.annotations.Param;
@Mapper
public interface TutorialMapper extends BaseMapper<Tutorial> {
Page<Tutorial> pageList(Page<Tutorial> page, @Param("categoryId") int categoryId, @Param("tutorialTitle") String tutorialTitle, @Param("lang") String lang);
Page<Tutorial> pageList(Page<Tutorial> page, @Param("categoryId") Long categoryId, @Param("tutorialTitle") String tutorialTitle, @Param("lang") String lang);
Page<Tutorial> page(Page<Tutorial> page, @Param("tutorial") Tutorial tutorial);
}

View File

@@ -1,24 +0,0 @@
package com.corewing.app.modules.admin;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SysMainController {
@GetMapping({"/", "/index.html"})
public String loading() {
return "/admin/loading";
}
@GetMapping("/admin/login.html")
public String login() {
return "/admin/login";
}
@GetMapping("/admin/index.html")
public String adminIndex() {
return "/admin/index";
}
}

View File

@@ -0,0 +1,101 @@
package com.corewing.app.modules.admin.biz;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.biz.feedback.FeedbackBatchDeleteRequest;
import com.corewing.app.dto.biz.feedback.FeedbackBatchStatusRequest;
import com.corewing.app.entity.Feedback;
import com.corewing.app.service.FeedbackService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* 用户反馈
*/
@Controller
@RequestMapping("/biz/feedback")
public class BizFeedBackController {
@Resource
private FeedbackService feedbackService;
/**
* 反馈管理首页
* @return
*/
@GetMapping("/index")
public String index() {
return "admin/biz/feedback/index";
}
/**
* 查询反馈数据分页
* @param feedback
* @return
*/
@GetMapping("/page")
@ResponseBody
public Result<Page<Feedback>> page(Feedback feedback) {
return Result.success(feedbackService.page(feedback));
}
/**
* 新增反馈
* @param feedback
* @return
*/
@PostMapping("/save")
@ResponseBody
public Result<String> save(@RequestBody Feedback feedback) {
return Result.isBool(feedbackService.save(feedback));
}
/**
* 编辑反馈
* @param feedback
* @return
*/
@PostMapping("/update")
@ResponseBody
public Result<String> update(@RequestBody Feedback feedback) {
return Result.isBool(feedbackService.updateById(feedback));
}
/**
* 删除反馈
* @param id
* @return
*/
@DeleteMapping("/delete")
@ResponseBody
public Result<String> delete(Long id) {
return Result.isBool(feedbackService.removeById(id));
}
/**
* 批量删除反馈
* @param feedbackBatchDeleteRequest
* @return
*/
@PostMapping("/batchDelete")
@ResponseBody
public Result<String> batchDelete(@RequestBody FeedbackBatchDeleteRequest feedbackBatchDeleteRequest) {
return Result.isBool(feedbackService.removeBatchByIds(feedbackBatchDeleteRequest.getIds()));
}
/**
* 批量更改状态
* @param feedbackBatchStatusRequest
* @return
*/
@PostMapping("/batchStatus")
@ResponseBody
public Result<String> batchStatus(@RequestBody FeedbackBatchStatusRequest feedbackBatchStatusRequest) {
return Result.isBool(feedbackService.batchStatus(feedbackBatchStatusRequest));
}
}

View File

@@ -0,0 +1,100 @@
package com.corewing.app.modules.admin.biz;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.biz.firmware.FirmwareBatchDeleteRequest;
import com.corewing.app.entity.Firmware;
import com.corewing.app.service.FirmwareService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
/**
* 固件管理
*/
@Controller
@RequestMapping("/biz/firmware")
public class BizFirmwareController {
@Resource
private FirmwareService firmwareService;
/**
* 固件管理首页
* @return
*/
@GetMapping("/index")
public String index() {
return "admin/biz/firmware/index";
}
/**
* 分页查询
* @param firmware
* @return
*/
@GetMapping("/page")
@ResponseBody
public Result<Page<Firmware>> page(Firmware firmware) {
return Result.success(firmwareService.page(firmware));
}
/**
* 保存
* @param firmware
* @return
*/
@PostMapping("/save")
@ResponseBody
public Result<String> save(@RequestBody Firmware firmware) {
return Result.isBool(firmwareService.save(firmware));
}
/**
* 更新
* @param firmware
* @return
*/
@PostMapping("/update")
@ResponseBody
public Result<String> update(@RequestBody Firmware firmware) {
return Result.isBool(firmwareService.updateById(firmware));
}
/**
* 删除
* @param id
* @return
*/
@DeleteMapping("/delete")
@ResponseBody
public Result<Firmware> delete(String id) {
return Result.isBool(firmwareService.removeById(id));
}
/**
* 批量删除
* @param firmwareBatchDeleteRequest
* @return
*/
@PostMapping("/batchDelete")
@ResponseBody
public Result<Firmware> batchDelete(@RequestBody FirmwareBatchDeleteRequest firmwareBatchDeleteRequest) {
return Result.isBool(firmwareService.removeBatchByIds(firmwareBatchDeleteRequest.getIds()));
}
/**
* 上传固件
* @param file
* @return
*/
@PostMapping("/uploadFile")
@ResponseBody
public Result<String> uploadFile(MultipartFile file) {
return Result.success();
}
}

View File

@@ -0,0 +1,65 @@
package com.corewing.app.modules.admin.biz;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.biz.privacyPolicy.PrivacyPolicyBatchDeleteRequest;
import com.corewing.app.entity.PrivacyPolicy;
import com.corewing.app.service.PrivacyPolicyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.core.env.PropertyResolver;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* 隐私政策
*/
@Controller
@RequestMapping("/biz/privacy_policy")
public class BizPrivacyPolicyController {
@Resource
private PrivacyPolicyService privacyPolicyService;
@GetMapping("/index")
public String index() {
return "admin/biz/privacyPolicy/index";
}
@GetMapping("/page")
@ResponseBody
public Result<Page<PrivacyPolicy>> page(PrivacyPolicy privacyPolicy) {
return Result.success(privacyPolicyService.page(privacyPolicy));
}
@PostMapping("/save")
@ResponseBody
public Result<String> save(@RequestBody PrivacyPolicy privacyPolicy) {
return Result.isBool(privacyPolicyService.save(privacyPolicy));
}
@PostMapping("/update")
@ResponseBody
public Result<String> update(@RequestBody PrivacyPolicy privacyPolicy) {
return Result.isBool(privacyPolicyService.updateById(privacyPolicy));
}
@DeleteMapping("/delete")
@ResponseBody
public Result<String> delete(Long id) {
return Result.isBool(privacyPolicyService.removeById(id));
}
@PostMapping("/batchDelete")
@ResponseBody
public Result<String> batchDelete(@RequestBody PrivacyPolicyBatchDeleteRequest privacyPolicyBatchDeleteRequest) {
return Result.isBool(privacyPolicyService.removeBatchByIds(privacyPolicyBatchDeleteRequest.getIds()));
}
}

View File

@@ -0,0 +1,143 @@
package com.corewing.app.modules.admin.biz;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.biz.tutorial.CategoryBatchDeleteRequest;
import com.corewing.app.entity.Tutorial;
import com.corewing.app.entity.TutorialCategory;
import com.corewing.app.service.TutorialCategoryService;
import com.corewing.app.service.TutorialService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
/**
* 教程指南
*/
@Controller
@RequestMapping("/biz/tutorial")
public class BizTutorialController {
@Resource
private TutorialCategoryService tutorialCategoryService;
@Resource
private TutorialService tutorialService;
/**
* 教程分页
* @param tutorial
* @return
*/
@GetMapping("/page")
@ResponseBody
public Result<Page<Tutorial>> page(Tutorial tutorial) {
return Result.success(tutorialService.page(tutorial));
}
/**
* 新增教程
* @param tutorial
* @return
*/
@PostMapping("/save")
@ResponseBody
public Result<String> save(@RequestBody Tutorial tutorial) {
return Result.isBool(tutorialService.save(tutorial));
}
/**
* 更新教程
* @param tutorial
* @return
*/
@PostMapping("/update")
@ResponseBody
public Result<String> update(@RequestBody Tutorial tutorial) {
return Result.isBool(tutorialService.updateById(tutorial));
}
/**
* 删除教程
* @param id
* @return
*/
@DeleteMapping("/delete")
@ResponseBody
public Result<String> delete(Long id) {
return Result.isBool(tutorialService.remove(id));
}
/**
* 教程管理首页
* @return
*/
@GetMapping("/index")
public String index() {
return "admin/biz/tutorial/index";
}
/**
* 教程分类分页
* @param tutorialCategory
* @return
*/
@GetMapping("/category/page")
@ResponseBody
public Result<Page<TutorialCategory>> categoryPage(TutorialCategory tutorialCategory) {
return Result.success(tutorialCategoryService.page(tutorialCategory));
}
/**
* 新增教程分类
* @param tutorialCategory
* @return
*/
@PostMapping("/category/save")
@ResponseBody
public Result<String> saveCategory(@RequestBody TutorialCategory tutorialCategory) {
tutorialCategory.setType(TutorialCategory.typeCategory);
return Result.isBool(tutorialCategoryService.save(tutorialCategory));
}
/**
* 更新教程分类
* @param tutorialCategory
* @return
*/
@PostMapping("/category/update")
@ResponseBody
public Result<String> updateCategory(@RequestBody TutorialCategory tutorialCategory) {
return Result.isBool(tutorialCategoryService.updateById(tutorialCategory));
}
/**
* 删除教程分类
* @param id
* @return
*/
@DeleteMapping("/category/delete")
@ResponseBody
public Result<String> deleteCategory(Long id) {
return Result.isBool(tutorialCategoryService.removeById(id));
}
/**
* 批量删除教程分类
* @param categoryBatchDeleteRequest
* @return
*/
@PostMapping("/category/batchDelete")
@ResponseBody
public Result<String> batchDeleteCategory(@RequestBody CategoryBatchDeleteRequest categoryBatchDeleteRequest) {
return Result.isBool(tutorialCategoryService.removeBatchByIds(categoryBatchDeleteRequest.getIds()));
}
}

View File

@@ -0,0 +1,106 @@
package com.corewing.app.modules.admin.biz;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.biz.user.BizUserBatchDeleteRequest;
import com.corewing.app.dto.biz.user.BizUserIdRequest;
import com.corewing.app.dto.biz.user.BizUserStatusRequest;
import com.corewing.app.dto.biz.user.ResetPasswordRequest;
import com.corewing.app.entity.User;
import com.corewing.app.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@Controller
@RequestMapping("/biz/user")
public class BizUserController {
@Resource
private UserService userService;
/**
* 跳转到用户管理页面
* @return 页面名称
*/
@GetMapping("/index")
public String index() {
return "admin/biz/user/index";
}
/**
* 获取分页信息
* @param user 用户搜索对象
* @return 用户信息集合
*/
@GetMapping("/page")
@ResponseBody
public Result<Page<User>> page(User user) {
Page<User> sysUserPage = userService.page(user);
return Result.success(sysUserPage);
}
/**
* 修改密码
* @param resetPasswordRequest 修改密码DTO
* @return 成功 or 失败
*/
@PutMapping("/resetPassword")
@ResponseBody
public Result<String> resetPassword(@RequestBody ResetPasswordRequest resetPasswordRequest) {
boolean flag = userService.resetPassword(resetPasswordRequest);
return Result.isBoolAsMsg(flag, "修改密码成功");
}
/**
* 新增用户
* @param user
* @return
*/
@PostMapping("/save")
@ResponseBody
public Result<String> save(@RequestBody User user) {
return Result.isBool(userService.save(user));
}
/**
* 修改用户
* @param user
* @return
*/
@PostMapping("/update")
@ResponseBody
public Result<String> update(@RequestBody User user) {
return Result.isBool(userService.update(user));
}
/**
* 单删用户
* @param bizUserIdRequest
* @return
*/
@PostMapping("/delete")
@ResponseBody
public Result<String> delete(@RequestBody BizUserIdRequest bizUserIdRequest) {
return Result.isBool(userService.removeById(bizUserIdRequest.getId()));
}
/**
* 批量删除用户
* @return
*/
@PostMapping("/batchDelete")
@ResponseBody
public Result<String> batchDelete(@RequestBody BizUserBatchDeleteRequest bizUserBatchDeleteRequest) {
return Result.isBool(userService.removeByIds(bizUserBatchDeleteRequest.getIds()));
}
@PostMapping("/batchStatus")
@ResponseBody
public Result<String> batchStatus(@RequestBody BizUserStatusRequest bizUserStatusRequests) {
return Result.isBool(userService.batchStatus(bizUserStatusRequests));
}
}

View File

@@ -0,0 +1,45 @@
package com.corewing.app.modules.admin.sys;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SysMainController {
/**
* 加载页
* @return
*/
@GetMapping({"/", "/index.html"})
public String loading() {
return "admin/loading";
}
/**
* 登录页
* @return
*/
@GetMapping("/admin/login.html")
public String login() {
return "admin/login";
}
/**
* 后台首页
* @return
*/
@GetMapping("/admin/index.html")
public String adminIndex() {
return "admin/main";
}
/**
* 仪表盘
* @return
*/
@GetMapping("/admin/dashboard")
public String dashboard() {
return "admin/dashboard";
}
}

View File

@@ -0,0 +1,28 @@
package com.corewing.app.modules.admin.sys;
import com.corewing.app.common.Result;
import com.corewing.app.entity.SysMenu;
import com.corewing.app.service.SysMenuService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.util.List;
@Controller
@RequestMapping("/sys/menu")
public class SysMenuController {
@Resource
private SysMenuService sysMenuService;
@GetMapping("/initSysMenu")
@ResponseBody
public Result<List<SysMenu>> initSysMenu() {
List<SysMenu> sysMenus = sysMenuService.initSysMenu();
return Result.success(sysMenus);
}
}

View File

@@ -0,0 +1,19 @@
package com.corewing.app.modules.admin.sys;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* 系统设置
*/
@Controller
@RequestMapping("/sys/setting")
public class SysSettingController {
@GetMapping
public String index() {
return "admin/sys/setting";
}
}

View File

@@ -1,12 +1,14 @@
package com.corewing.app.modules.admin;
package com.corewing.app.modules.admin.sys;
import cn.dev33.satoken.stp.StpUtil;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.SysLoginRequest;
import com.corewing.app.dto.api.SysLoginRequest;
import com.corewing.app.entity.SysUser;
import com.corewing.app.service.SysUserService;
import com.corewing.app.util.I18nUtil;
import com.corewing.app.util.IpUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@@ -16,7 +18,7 @@ import java.util.Map;
/**
* 后台管理用户 Controller
*/
@RestController
@Controller
@RequestMapping("/sys/user")
public class SysUserController {
@@ -26,13 +28,25 @@ public class SysUserController {
this.sysUserService = sysUserService;
}
@GetMapping("/index")
public String index() {
return "admin/sys/user/index";
}
@GetMapping("/page")
@ResponseBody
public Result<Page<SysUser>> page(SysUser sysUser) {
Page<SysUser> sysUserPage = sysUserService.page(sysUser);
return Result.success(sysUserPage);
}
/**
* 后台管理登录
*/
@PostMapping("/login")
@ResponseBody
public Result<Map<String, Object>> login(@RequestBody SysLoginRequest request, HttpServletRequest httpRequest) {
try {
// 获取登录IP
String loginIp = IpUtil.getClientIp(httpRequest);
// 执行登录
@@ -57,6 +71,7 @@ public class SysUserController {
* 后台管理登出
*/
@PostMapping("/logout")
@ResponseBody
public Result<String> logout() {
StpUtil.logout();
return Result.success(I18nUtil.getMessage("user.logout.success"));
@@ -66,6 +81,7 @@ public class SysUserController {
* 获取当前登录用户信息
*/
@GetMapping("/info")
@ResponseBody
public Result<SysUser> getUserInfo() {
Long userId = StpUtil.getLoginIdAsLong();
SysUser user = sysUserService.getById(userId);

View File

@@ -4,7 +4,7 @@ import cn.dev33.satoken.stp.StpUtil;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.FeedbackRequest;
import com.corewing.app.dto.api.FeedbackRequest;
import com.corewing.app.entity.Feedback;
import com.corewing.app.service.FeedbackService;
import com.corewing.app.util.DingTalkUtil;
@@ -23,13 +23,13 @@ import java.util.List;
*/
@RestController
@RequestMapping("/feedback")
public class FeedbackController {
public class AppFeedbackController {
private final FeedbackService feedbackService;
private final DingTalkUtil dingTalkUtil;
private final Ip2RegionUtil ip2RegionUtil;
public FeedbackController(FeedbackService feedbackService, DingTalkUtil dingTalkUtil, Ip2RegionUtil ip2RegionUtil) {
public AppFeedbackController(FeedbackService feedbackService, DingTalkUtil dingTalkUtil, Ip2RegionUtil ip2RegionUtil) {
this.feedbackService = feedbackService;
this.dingTalkUtil = dingTalkUtil;
this.ip2RegionUtil = ip2RegionUtil;

View File

@@ -15,11 +15,11 @@ import org.springframework.web.bind.annotation.*;
*/
@RestController
@RequestMapping("/firmware")
public class FirmwareController {
public class AppFirmwareController {
private final FirmwareService firmwareService;
public FirmwareController(FirmwareService firmwareService) {
public AppFirmwareController(FirmwareService firmwareService) {
this.firmwareService = firmwareService;
}

View File

@@ -4,8 +4,8 @@ import cn.dev33.satoken.stp.StpUtil;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.corewing.app.common.Result;
import com.corewing.app.dto.CreateParamRequest;
import com.corewing.app.dto.UpdateParamRequest;
import com.corewing.app.dto.api.CreateParamRequest;
import com.corewing.app.dto.api.UpdateParamRequest;
import com.corewing.app.entity.ParamsCenter;
import com.corewing.app.service.ParamsCenterService;
import com.corewing.app.util.I18nUtil;
@@ -20,11 +20,11 @@ import java.util.List;
*/
@RestController
@RequestMapping("/params")
public class ParamsCenterController {
public class AppParamsCenterController {
private final ParamsCenterService paramsService;
public ParamsCenterController(ParamsCenterService paramsService) {
public AppParamsCenterController(ParamsCenterService paramsService) {
this.paramsService = paramsService;
}

View File

@@ -0,0 +1,37 @@
package com.corewing.app.modules.app;
import com.corewing.app.entity.PrivacyPolicy;
import com.corewing.app.service.PrivacyPolicyService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.util.List;
/**
* 隐私政策与协议
*/
@Controller
@RequestMapping("/privacy_policy")
public class AppPrivacyPolicyController {
@Resource
private PrivacyPolicyService privacyPolicyService;
/**
* 隐私政策列表
* @return
*/
@GetMapping("/view_list/{lang}")
public String viewList(@PathVariable String lang, ModelMap modelMap) {
List<PrivacyPolicy> list = privacyPolicyService.list();
modelMap.put("list", list);
// 获取最新更新时间
modelMap.put("lastUpdateTime", privacyPolicyService.getLastUpdateTime());
return "app/privacyPolicy/index";
}
}

View File

@@ -22,12 +22,12 @@ import java.util.List;
@RequestMapping("/tutorial")
@Controller
@Slf4j
public class TutorialController {
public class AppTutorialController {
private final TutorialService tutorialService;
private final TutorialCategoryService tutorialCategoryService;
public TutorialController(TutorialService tutorialService, TutorialCategoryService tutorialCategoryService) {
public AppTutorialController(TutorialService tutorialService, TutorialCategoryService tutorialCategoryService) {
this.tutorialService = tutorialService;
this.tutorialCategoryService = tutorialCategoryService;
}
@@ -42,7 +42,7 @@ public class TutorialController {
public String viewDetail(@PathVariable Long tutorialId, ModelMap model) {
Tutorial tutorial = tutorialService.getById(tutorialId);
model.put("tutorial", tutorial);
return "/app/tutorial/viewDetail";
return "app/tutorial/viewDetail";
}
@@ -96,11 +96,11 @@ public class TutorialController {
public Result<IPage<Tutorial>> getPageList(
@RequestParam(defaultValue = "1") Long current,
@RequestParam(defaultValue = "10") Long size,
@RequestParam(required = false, defaultValue = "0") Integer categoryId,
@RequestParam(required = false, defaultValue = "0") Long categoryId,
@RequestParam(required = false) String tutorialTitle) {
try {
Page<Tutorial> page = new Page<>(current, size);
IPage<Tutorial> pageResult = tutorialService.pageList(page, categoryId, tutorialTitle, I18nUtil.getCurrentLocale().getLanguage());
Page<Tutorial> pageResult = tutorialService.pageList(page, categoryId, tutorialTitle, I18nUtil.getCurrentLocale().getLanguage());
return Result.success(pageResult);
} catch (Exception e) {
return Result.error(e.getMessage());

View File

@@ -2,10 +2,10 @@ package com.corewing.app.modules.app;
import cn.dev33.satoken.stp.StpUtil;
import com.corewing.app.common.Result;
import com.corewing.app.dto.LoginRequest;
import com.corewing.app.dto.RegisterRequest;
import com.corewing.app.dto.SendCodeRequest;
import com.corewing.app.dto.UpdatePasswordRequest;
import com.corewing.app.dto.api.LoginRequest;
import com.corewing.app.dto.api.RegisterRequest;
import com.corewing.app.dto.api.SendCodeRequest;
import com.corewing.app.dto.api.UpdatePasswordRequest;
import com.corewing.app.entity.User;
import com.corewing.app.service.UserService;
import com.corewing.app.service.VerifyCodeService;
@@ -22,12 +22,12 @@ import java.util.Map;
*/
@RestController
@RequestMapping("/user")
public class UserController {
public class AppUserController {
private final UserService userService;
private final VerifyCodeService verifyCodeService;
public UserController(UserService userService, VerifyCodeService verifyCodeService) {
public AppUserController(UserService userService, VerifyCodeService verifyCodeService) {
this.userService = userService;
this.verifyCodeService = verifyCodeService;
}
@@ -145,7 +145,7 @@ public class UserController {
}
/**
* 修改密码
* 修改密码@
*/
@PutMapping("/password")
public Result<String> updatePassword(@RequestBody UpdatePasswordRequest request) {

View File

@@ -0,0 +1,18 @@
package com.corewing.app.modules.directive;
import com.corewing.app.service.SysOptionService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
@Service("option")
public class SysOptionDirective {
@Resource
private SysOptionService sysOptionService;
public String getValue(String key) {
return sysOptionService.getValueByKey(key);
}
}

View File

@@ -3,6 +3,7 @@ package com.corewing.app.service;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.dto.biz.feedback.FeedbackBatchStatusRequest;
import com.corewing.app.entity.Feedback;
import java.util.List;
@@ -12,6 +13,9 @@ import java.util.List;
*/
public interface FeedbackService extends IService<Feedback> {
Page<Feedback> page(Feedback feedback);
/**
* 创建反馈
*
@@ -47,4 +51,11 @@ public interface FeedbackService extends IService<Feedback> {
* @return 是否成功
*/
boolean updateStatus(Long id, Integer status);
/**
* 批量修改状态
* @param feedbackBatchStatusRequest
* @return
*/
boolean batchStatus(FeedbackBatchStatusRequest feedbackBatchStatusRequest);
}

View File

@@ -1,6 +1,8 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.common.Result;
import com.corewing.app.entity.Firmware;
/**
@@ -8,6 +10,13 @@ import com.corewing.app.entity.Firmware;
*/
public interface FirmwareService extends IService<Firmware> {
/**
* 查询固件分页数据
* @param firmware
* @return
*/
Page<Firmware> page(Firmware firmware);
/**
* 根据固件名称查询固件
*

View File

@@ -0,0 +1,12 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.PrivacyPolicy;
public interface PrivacyPolicyService extends IService<PrivacyPolicy> {
Page<PrivacyPolicy> page(PrivacyPolicy privacyPolicy);
String getLastUpdateTime();
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.SysMenu;
import java.util.List;
public interface SysMenuService extends IService<SysMenu> {
List<SysMenu> initSysMenu();
}

View File

@@ -0,0 +1,10 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.SysOption;
public interface SysOptionService extends IService<SysOption> {
String getValueByKey(String key);
}

View File

@@ -1,5 +1,6 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.SysUser;
@@ -8,6 +9,8 @@ import com.corewing.app.entity.SysUser;
*/
public interface SysUserService extends IService<SysUser> {
Page<SysUser> page(SysUser sysUser);
/**
* 根据用户名查询用户
*

View File

@@ -1,7 +1,11 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.TutorialCategory;
public interface TutorialCategoryService extends IService<TutorialCategory> {
Page<TutorialCategory> page(TutorialCategory tutorialCategory);
}

View File

@@ -4,7 +4,16 @@ import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.entity.Tutorial;
import org.springframework.web.bind.annotation.RequestBody;
public interface TutorialService extends IService<Tutorial> {
IPage<Tutorial> pageList(Page<Tutorial> page, int categoryId, String tutorialTitle, String lang);
Page<Tutorial> pageList(Page<Tutorial> page, Long categoryId, String tutorialTitle, String lang);
Page<Tutorial> page(Tutorial tutorial);
boolean save(Tutorial tutorial);
boolean update(Tutorial tutorial);
boolean remove(Long id);
}

View File

@@ -1,13 +1,40 @@
package com.corewing.app.service;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.corewing.app.dto.biz.user.BizUserIdRequest;
import com.corewing.app.dto.biz.user.BizUserStatusRequest;
import com.corewing.app.dto.biz.user.ResetPasswordRequest;
import com.corewing.app.entity.User;
import java.util.List;
/**
* 应用用户 Service 接口
*/
public interface UserService extends IService<User> {
/**
* 获取用户分页数据
* @param user
* @return
*/
Page<User> page(User user);
/**
* 新增用户数据
* @param user
* @return
*/
boolean save(User user);
/**
* 更新用户数据
* @param user
* @return
*/
boolean update(User user);
/**
* 根据用户名查询用户
*
@@ -74,4 +101,18 @@ public interface UserService extends IService<User> {
* @param loginIp 登录IP
*/
void updateLoginInfo(Long userId, String loginIp);
/**
* 修改密码
* @param resetPasswordRequest
* @return
*/
boolean resetPassword(ResetPasswordRequest resetPasswordRequest);
/**
* 批量修改状态
* @param bizUserStatusRequest
* @return
*/
boolean batchStatus(BizUserStatusRequest bizUserStatusRequest);
}

View File

@@ -1,24 +1,44 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.dto.biz.feedback.FeedbackBatchStatusRequest;
import com.corewing.app.entity.Feedback;
import com.corewing.app.mapper.FeedbackMapper;
import com.corewing.app.service.FeedbackService;
import com.corewing.app.util.I18nUtil;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import javax.annotation.Resource;
import java.util.List;
import static io.lettuce.core.GeoArgs.Unit.m;
/**
* 问题反馈 Service 实现类
*/
@Service
public class FeedbackServiceImpl extends ServiceImpl<FeedbackMapper, Feedback> implements FeedbackService {
@Resource
private FeedbackMapper feedbackMapper;
@Override
public Page<Feedback> page(Feedback feedback) {
Page<Feedback> page = PageContext.getPage(Feedback.class);
// LambdaQueryWrapper<Feedback> wrapper = new LambdaQueryWrapper<>();
// wrapper.eq(feedback.getStatus() != null, Feedback::getStatus, feedback.getStatus());
// wrapper.like(StringUtils.hasText(feedback.getTitle()), Feedback::getTitle, feedback.getTitle());
// wrapper.eq(StringUtils.hasText(feedback.getFeedbackType()), Feedback::getFeedbackType, feedback.getFeedbackType());
return feedbackMapper.page(page, feedback);
}
@Override
public boolean createFeedback(Feedback feedback) {
// 设置默认状态为待处理
@@ -75,4 +95,16 @@ public class FeedbackServiceImpl extends ServiceImpl<FeedbackMapper, Feedback> i
return this.updateById(feedback);
}
@Transactional(rollbackFor = Exception.class)
@Override
public boolean batchStatus(FeedbackBatchStatusRequest feedbackBatchStatusRequest) {
feedbackBatchStatusRequest.getIds().forEach(id -> {
LambdaUpdateWrapper<Feedback> wrapper = new LambdaUpdateWrapper<>();
wrapper.eq(Feedback::getId, id);
wrapper.set(Feedback::getStatus, feedbackBatchStatusRequest.getStatus());
update(wrapper);
});
return true;
}
}

View File

@@ -1,11 +1,14 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.entity.Firmware;
import com.corewing.app.mapper.FirmwareMapper;
import com.corewing.app.service.FirmwareService;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
/**
* 固件 Service 实现类
@@ -13,10 +16,21 @@ import org.springframework.stereotype.Service;
@Service
public class FirmwareServiceImpl extends ServiceImpl<FirmwareMapper, Firmware> implements FirmwareService {
@Override
public Page<Firmware> page(Firmware firmware) {
Page<Firmware> page = PageContext.getPage(Firmware.class);
LambdaQueryWrapper<Firmware> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.hasText(firmware.getFirmwareName()), Firmware::getFirmwareName, firmware.getFirmwareName());
queryWrapper.eq(firmware.getFirmwareType() != null, Firmware::getFirmwareType, firmware.getFirmwareType());
return page(page, queryWrapper);
}
@Override
public Firmware getByFirmwareName(String firmwareName) {
LambdaQueryWrapper<Firmware> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(Firmware::getFirmwareName, firmwareName);
return this.getOne(wrapper);
}
}

View File

@@ -0,0 +1,33 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.entity.PrivacyPolicy;
import com.corewing.app.mapper.PrivacyPolicyMapper;
import com.corewing.app.service.PrivacyPolicyService;
import com.corewing.app.util.DateUtils;
import org.springframework.aop.framework.ProxyFactory;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
@Service
public class PrivacyPolicyServiceImpl extends ServiceImpl<PrivacyPolicyMapper, PrivacyPolicy> implements PrivacyPolicyService {
@Override
public Page<PrivacyPolicy> page(PrivacyPolicy privacyPolicy) {
Page<PrivacyPolicy> page = PageContext.getPage(PrivacyPolicy.class);
LambdaQueryWrapper<PrivacyPolicy> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.hasText(privacyPolicy.getTitle()), PrivacyPolicy::getTitle, privacyPolicy.getTitle());
queryWrapper.eq(privacyPolicy.getVisible() != null, PrivacyPolicy::getVisible, privacyPolicy.getVisible());
return page(page, queryWrapper);
}
@Override
public String getLastUpdateTime() {
LambdaQueryWrapper<PrivacyPolicy> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.orderByDesc(PrivacyPolicy::getUpdateTime, PrivacyPolicy::getCreateTime);
PrivacyPolicy privacyPolicy = list(queryWrapper).get(0);
return DateUtils.format(privacyPolicy.getUpdateTime() == null ? privacyPolicy.getCreateTime() : privacyPolicy.getUpdateTime(), "yyyy年MM月dd日");
}
}

View File

@@ -0,0 +1,23 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.entity.SysMenu;
import com.corewing.app.mapper.SysMenuMapper;
import com.corewing.app.service.SysMenuService;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class SysMenuServiceImpl extends ServiceImpl<SysMenuMapper, SysMenu> implements SysMenuService {
@Override
public List<SysMenu> initSysMenu() {
LambdaQueryWrapper<SysMenu> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(SysMenu::isVisible, Boolean.TRUE);
queryWrapper.orderByAsc(SysMenu::getSort);
return list(queryWrapper);
}
}

View File

@@ -0,0 +1,19 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.entity.SysOption;
import com.corewing.app.mapper.SysOptionMapper;
import com.corewing.app.service.SysOptionService;
import org.springframework.stereotype.Service;
@Service
public class SysOptionServiceImpl extends ServiceImpl<SysOptionMapper, SysOption> implements SysOptionService {
@Override
public String getValueByKey(String key) {
LambdaQueryWrapper<SysOption> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(SysOption::getKey, key);
return getOne(queryWrapper).getValue();
}
}

View File

@@ -2,7 +2,9 @@ package com.corewing.app.service.impl;
import cn.dev33.satoken.stp.StpUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.entity.SysUser;
import com.corewing.app.mapper.SysUserMapper;
import com.corewing.app.service.SysUserService;
@@ -20,6 +22,13 @@ import java.time.LocalDateTime;
@Service
public class SysUserServiceImpl extends ServiceImpl<SysUserMapper, SysUser> implements SysUserService {
public Page<SysUser> page(SysUser sysUser) {
Page<SysUser> page = PageContext.getPage(SysUser.class);
LambdaQueryWrapper<SysUser> queryWrapper = new LambdaQueryWrapper<>();
return page(page, queryWrapper);
}
@Override
public SysUser getByUsername(String username) {
if (!StringUtils.hasText(username)) {

View File

@@ -1,11 +1,24 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.entity.TutorialCategory;
import com.corewing.app.mapper.TutorialCategoryMapper;
import com.corewing.app.service.TutorialCategoryService;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
@Service
public class TutorialCategoryServiceImpl extends ServiceImpl<TutorialCategoryMapper, TutorialCategory> implements TutorialCategoryService {
public Page<TutorialCategory> page(TutorialCategory tutorialCategory){
Page<TutorialCategory> page = PageContext.getPage(TutorialCategory.class);
LambdaQueryWrapper<TutorialCategory> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.hasText(tutorialCategory.getCategoryTitle()), TutorialCategory::getCategoryTitle, tutorialCategory.getCategoryTitle());
return page(page, queryWrapper);
}
}

View File

@@ -1,24 +1,67 @@
package com.corewing.app.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.entity.Tutorial;
import com.corewing.app.entity.TutorialCategoryRelation;
import com.corewing.app.mapper.TutorialMapper;
import com.corewing.app.service.TutorialCategoryRelationService;
import com.corewing.app.service.TutorialService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import javax.annotation.Resource;
@Service
public class TutorialServiceImpl extends ServiceImpl<TutorialMapper, Tutorial> implements TutorialService {
private final TutorialMapper tutorialMapper;
@Resource
private TutorialMapper tutorialMapper;
public TutorialServiceImpl(TutorialMapper tutorialMapper) {
this.tutorialMapper = tutorialMapper;
@Resource
private TutorialCategoryRelationService tutorialCategoryRelationService;
@Override
public Page<Tutorial> pageList(Page<Tutorial> page, Long categoryId, String tutorialTitle, String lang) {
return tutorialMapper.pageList(page, categoryId, tutorialTitle, lang);
}
@Override
public IPage<Tutorial> pageList(Page<Tutorial> page, int categoryId, String tutorialTitle, String lang) {
return tutorialMapper.pageList(page, categoryId, tutorialTitle, lang);
public Page<Tutorial> page(Tutorial tutorial) {
Page<Tutorial> page = PageContext.getPage(Tutorial.class);
return tutorialMapper.page(page, tutorial);
}
@Transactional(rollbackFor = Exception.class)
@Override
public boolean save(Tutorial tutorial) {
super.save(tutorial);
TutorialCategoryRelation tutorialCategoryRelation = new TutorialCategoryRelation();
tutorialCategoryRelation.setTutorialId(tutorial.getId());
tutorialCategoryRelation.setCategoryId(tutorial.getCategoryId());
return tutorialCategoryRelationService.save(tutorialCategoryRelation);
}
@Transactional(rollbackFor = Exception.class)
@Override
public boolean update(Tutorial tutorial) {
super.updateById(tutorial);
tutorialCategoryRelationService.remove(new LambdaQueryWrapper<TutorialCategoryRelation>().eq(TutorialCategoryRelation::getCategoryId, tutorial.getCategoryId()));
TutorialCategoryRelation tutorialCategoryRelation = new TutorialCategoryRelation();
tutorialCategoryRelation.setTutorialId(tutorial.getId());
tutorialCategoryRelation.setCategoryId(tutorial.getCategoryId());
return tutorialCategoryRelationService.save(tutorialCategoryRelation);
}
@Transactional(rollbackFor = Exception.class)
@Override
public boolean remove(Long id) {
Tutorial tutorial = getById(id);
removeById(id);
return tutorialCategoryRelationService.remove(new LambdaQueryWrapper<TutorialCategoryRelation>().eq(TutorialCategoryRelation::getCategoryId, tutorial.getCategoryId()));
}
}

View File

@@ -2,7 +2,14 @@ package com.corewing.app.service.impl;
import cn.dev33.satoken.stp.StpUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.corewing.app.common.page.PageContext;
import com.corewing.app.dto.biz.user.BizUserIdRequest;
import com.corewing.app.dto.biz.user.BizUserStatusRequest;
import com.corewing.app.dto.biz.user.ResetPasswordRequest;
import com.corewing.app.entity.User;
import com.corewing.app.mapper.UserMapper;
import com.corewing.app.service.UserService;
@@ -10,10 +17,13 @@ import com.corewing.app.service.VerifyCodeService;
import com.corewing.app.util.I18nUtil;
import com.corewing.app.util.Ip2RegionUtil;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.DigestUtils;
import org.springframework.util.StringUtils;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.List;
/**
* 应用用户 Service 实现类
@@ -23,10 +33,64 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
private final VerifyCodeService verifyCodeService;
private final Ip2RegionUtil ip2RegionUtil;
private final UserMapper userMapper;
public UserServiceImpl(VerifyCodeService verifyCodeService, Ip2RegionUtil ip2RegionUtil) {
public UserServiceImpl(VerifyCodeService verifyCodeService, Ip2RegionUtil ip2RegionUtil, UserMapper userMapper) {
this.verifyCodeService = verifyCodeService;
this.ip2RegionUtil = ip2RegionUtil;
this.userMapper = userMapper;
}
@Override
public Page<User> page(User user) {
Page<User> page = PageContext.getPage(User.class);
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.hasText(user.getNickName()), User::getNickName, user.getNickName());
queryWrapper.like(StringUtils.hasText(user.getUsername()), User::getUsername, user.getUsername());
queryWrapper.like(user.getStatus() != null, User::getStatus, user.getStatus());
return page(page, queryWrapper);
}
@Override
public boolean save(User user) {
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getUsername, user.getUsername());
if(count(queryWrapper) > 0) {
throw new RuntimeException(I18nUtil.getMessage(I18nUtil.getMessage("error.username.exists")));
}
return super.save(user);
}
@Override
public boolean update(User user) {
// 校验用户名
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getUsername, user.getUsername());
queryWrapper.ne(User::getId, user.getId());
if(count(queryWrapper) > 0) {
throw new RuntimeException(I18nUtil.getMessage(I18nUtil.getMessage("error.username.exists")));
}
// 校验手机号码
LambdaQueryWrapper<User> checkPhoneWrapper = new LambdaQueryWrapper<>();
checkPhoneWrapper.eq(User::getUsername, user.getUsername());
checkPhoneWrapper.ne(User::getId, user.getId());
if(count(checkPhoneWrapper) > 0) {
throw new RuntimeException(I18nUtil.getMessage(I18nUtil.getMessage("error.phone.exists")));
}
// 校验邮箱
LambdaQueryWrapper<User> checkEmailWrapper = new LambdaQueryWrapper<>();
checkEmailWrapper.eq(User::getUsername, user.getUsername());
checkEmailWrapper.ne(User::getId, user.getId());
if(count(checkEmailWrapper) > 0) {
throw new RuntimeException(I18nUtil.getMessage(I18nUtil.getMessage("error.email.exists")));
}
return updateById(user);
}
@Override
@@ -80,8 +144,9 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
}
// 验证密码MD5加密
String encryptPassword = DigestUtils.md5DigestAsHex(password.getBytes(StandardCharsets.UTF_8));
if (!encryptPassword.equals(user.getPassword())) {
// String encryptPassword = DigestUtils.md5DigestAsHex(password.getBytes(StandardCharsets.UTF_8));
// 客户端已经使用加密
if (!password.equals(user.getPassword())) {
throw new RuntimeException(I18nUtil.getMessage("error.password.incorrect"));
}
@@ -166,4 +231,28 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
user.setLoginRegion(ip2RegionUtil.getRegion(loginIp));
this.updateById(user);
}
@Override
public boolean resetPassword(ResetPasswordRequest resetPasswordRequest) {
User user = getById(resetPasswordRequest.getUserId());
if(user == null) {
throw new RuntimeException(I18nUtil.getMessage("error.user.not.found"));
}
// 更新新密码
String newPasswordMd5 = DigestUtils.md5DigestAsHex(resetPasswordRequest.getPassword().getBytes(StandardCharsets.UTF_8));
user.setPassword(newPasswordMd5);
return updateById(user);
}
@Transactional(rollbackFor = Exception.class)
@Override
public boolean batchStatus(BizUserStatusRequest bizUserStatusRequest) {
bizUserStatusRequest.getIds().forEach(id -> {
LambdaUpdateWrapper<User> wrapper = new LambdaUpdateWrapper<>();
wrapper.eq(User::getId, id);
wrapper.set(User::getStatus, bizUserStatusRequest.getStatus());
this.update(wrapper);
});
return true;
}
}

View File

@@ -0,0 +1,14 @@
package com.corewing.app.util;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
public class DateUtils {
// 格式化LocalDateTime为字符串
public static String format(LocalDateTime time, String pattern) {
DateTimeFormatter formatter = DateTimeFormatter.ofPattern(pattern);
return time.format(formatter);
}
}

View File

@@ -55,4 +55,8 @@ public class TutorialVO {
*/
private String categoryTitle;
private String lang;
private Long categoryId;
}

View File

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.corewing.app.mapper.FeedbackMapper">
<!-- 结果映射 -->
<resultMap id="VOResultMap" type="com.corewing.app.entity.Feedback">
<id column="id" property="id"/>
<result column="feedback_type" property="feedbackType"/>
<result column="title" property="title"/>
<result column="content" property="content"/>
<result column="contact" property="contact"/>
<result column="status" property="status"/>
<result column="nick_name" property="nickName"/>
<result column="username" property="username"/>
<result column="create_time" property="createTime"/>
<result column="update_time" property="updateTime"/>
</resultMap>
<!-- 基础查询SQL片段 -->
<sql id="selectVOSql">
select f.*,u.nick_name, u.username
from app_feedback f
left join app_user u on f.user_id = u.id
</sql>
<!-- 分页查询 -->
<select id="page" resultMap="VOResultMap">
<include refid="selectVOSql"/>
<where>
<if test="feedback.status != null">
AND f.status = #{feedback.status}
</if>
<if test="feedback.title != null and feedback.title != ''">
AND f.title like CONCAT('%', #{feedback.title}, '%')
</if>
<if test="feedback.feedbackType != null and feedback.feedbackType != ''">
AND f.feedbackType like CONCAT('%', #{feedback.feedbackType}, '%')
</if>
</where>
</select>
</mapper>

View File

@@ -11,14 +11,16 @@
<result column="view_count" property="viewCount"/>
<result column="recommend_status" property="recommendStatus"/>
<result column="status" property="status"/>
<result column="lang" property="lang"/>
<result column="category_title" property="categoryTitle"/>
<result column="category_id" property="categoryId"/>
<result column="create_time" property="createTime"/>
<result column="update_time" property="updateTime"/>
</resultMap>
<!-- 基础查询SQL片段 -->
<sql id="selectVOSql">
select c.*, cc.category_title
select c.*, cc.category_title, cc.id as category_id
from app_tutorial c
left join app_tutorial_category_relation ccr on c.id = ccr.tutorial_id
left join app_tutorial_category cc on cc.id = ccr.category_id
@@ -36,9 +38,28 @@
<if test="tutorialTitle != null and tutorialTitle != ''">
AND c.tutorial_title like CONCAT('%', #{tutorialTitle}, '%')
</if>
</where>
ORDER BY c.recommend_status,c.create_time asc
</select>
<!-- 分页查询 -->
<select id="page" resultMap="VOResultMap">
<include refid="selectVOSql"/>
<where>
<if test="tutorial.categoryId != null and tutorial.categoryId != 0">
AND cc.id = #{tutorial.categoryId}
</if>
<if test="tutorial.tutorialTitle != null and tutorial.tutorialTitle != ''">
AND c.tutorial_title like CONCAT('%', #{tutorial.tutorialTitle}, '%')
</if>
<if test="tutorial.lang != null and tutorial.lang != ''">
AND c.lang = #{tutorial.lang}
</if>
<if test="tutorial.status != null">
AND c.status = #{tutorial.status}
</if>
</where>
</select>
</mapper>

View File

@@ -0,0 +1,112 @@
:root {
--primary-color: #5B5FDE;
--secondary-color: #0EA5E9;
--accent-color: #FF6B6B;
--error-color: #F43F5E;
--success-color: #10B981;
--warning-color: #F59E0B;
--info-color: #3B82F6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3F4F6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.main-container {
padding: 14px;
}
/* 欢迎卡片 */
.welcome-card {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
border-radius: 16px;
padding: 35px;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(91, 95, 222, 0.2);
position: relative;
overflow: hidden;
}
.welcome-card::before {
content: '';
position: absolute;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -80px;
right: -80px;
}
.welcome-card h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.welcome-card p {
font-size: 15px;
opacity: 0.95;
position: relative;
z-index: 1;
}
/* 统计卡片 */
.stat-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
border: 1px solid #E5E7EB;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stat-card i {
font-size: 40px;
opacity: 0.9;
margin-bottom: 12px;
}
.stat-card h3 {
font-size: 30px;
font-weight: 700;
margin: 12px 0 6px;
color: #1F2937;
}
.stat-card p {
color: #6B7280;
font-size: 13px;
margin: 0;
}
.stat-card.primary i {
color: var(--primary-color);
}
.stat-card.success i {
color: var(--success-color);
}
.stat-card.warning i {
color: var(--warning-color);
}
.stat-card.info i {
color: var(--info-color);
}

View File

@@ -0,0 +1,217 @@
:root {
--primary-color: #5B5FDE;
--secondary-color: #0EA5E9;
--accent-color: #FF6B6B;
--error-color: #F43F5E;
--success-color: #10B981;
--warning-color: #F59E0B;
--info-color: #3B82F6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3F4F6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 侧边栏样式 */
.sidebar {
min-height: 100vh;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 180px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
padding: 18px 12px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header h4 {
font-size: 16px;
font-weight: 700;
margin: 0;
}
.sidebar-header i {
margin-right: 5px;
font-size: 16px;
}
.sidebar-menu {
padding: 12px 8px;
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
padding: 9px 10px;
border-radius: 8px;
margin: 3px 0;
transition: all 0.3s;
font-weight: 500;
font-size: 13px;
display: flex;
align-items: center;
}
.sidebar .nav-link i {
width: 18px;
font-size: 15px;
}
.sidebar .nav-link:hover {
background-color: rgba(255, 255, 255, 0.15);
color: white;
transform: translateX(5px);
}
.sidebar .nav-link.active {
background-color: rgba(255, 255, 255, 0.25);
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sidebar-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 8px;
}
.btn-logout {
width: 100%;
padding: 9px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
transition: all 0.3s;
}
.btn-logout:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
/* 顶部导航栏 */
.navbar {
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 12px 25px;
}
.navbar-brand {
font-size: 18px;
font-weight: 700;
color: #1F2937;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
color: #4B5563;
font-weight: 500;
font-size: 14px;
}
.user-info i {
font-size: 20px;
color: var(--primary-color);
}
/* 主内容区 */
.main-content {
margin-left: 180px;
}
/* 内容区域 */
.content-wrapper {
padding: 0;
}
/* 页面标题 */
.page-title {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin-bottom: 20px;
}
/* 卡片容器 */
.card {
background: white;
border-radius: 12px;
border: 1px solid #E5E7EB;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.card-body {
padding: 25px;
}
/* iframe样式 */
.page-iframe {
width: 100%;
height: calc(100vh - 72px); /* 减去导航栏高度 */
border: none;
transition: opacity 0.3s ease;
border-radius: 8px;
}
/* 加载状态 */
.loading-state {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* 响应式 */
@media (max-width: 768px) {
.sidebar {
width: 100%;
position: relative;
min-height: auto;
}
.main-content {
margin-left: 0;
}
.sidebar-footer {
position: static;
margin-top: 15px;
}
.welcome-card {
padding: 25px;
}
.welcome-card h2 {
font-size: 20px;
}
.content-wrapper {
padding: 0;
min-height: calc(100vh - 72px);
}
}

View File

@@ -0,0 +1,124 @@
/* 基础样式优化 */
body {
background-color: #f8f9fa;
padding: 20px;
}
.table-container {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 18px;
margin-bottom: 2rem;
}
.search-bar {
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* 批量操作样式(表格下方左侧) */
.batch-actions {
display: flex;
align-items: center;
}
.page-info {
display: flex;
align-items: center;
color: #6c757d;
margin-right: 1rem;
}
/* 表格样式优化 */
.table {
margin-bottom: 0;
}
.table-hover tbody tr:hover {
background-color: rgba(14, 165, 233, 0.05);
cursor: pointer;
}
.table tbody td, table thead th{
text-align: center;
}
/*.table tbody tr.selected {*/
/* background-color: rgba(14, 165, 233, 0.1);*/
/* border-color: #0ea5e9;*/
/*}*/
/*.table th {*/
/* font-weight: 600;*/
/* color: #212529;*/
/* border-bottom-width: 2px;*/
/*}*/
/*.table td, .table th {*/
/* vertical-align: middle;*/
/* padding: 12px 16px;*/
/*}*/
/* 搜索框样式 */
.search-item {
flex-grow: 1;
flex-shrink: 0;
min-width: 200px;
max-width: 280px;
}
.input-group-text {
background-color: #f1f3f5;
border-color: #dee2e6;
}
/* 按钮样式优化 */
.btn {
padding: 6px 16px;
border-radius: 6px;
}
.btn-sm {
padding: 4px 12px;
}
/* 徽章样式 */
.badge {
padding: 4px 8px;
font-size: 13px;
font-weight: 500;
border-radius: 4px;
}
/* 加载动画 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 0;
}
/* 无数据提示 */
.no-data {
color: #6c757d;
text-align: center;
padding: 40px 0;
}
.no-data i {
font-size: 48px;
margin-bottom: 16px;
color: #adb5bd;
}
.ellipsis-single {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
max-width: 200px; /* 自定义最大宽度(根据需求调整,如 150px/300px */
}

View File

@@ -0,0 +1,83 @@
// 引入 axios@1.4.0(确保已引入 axios.min.js
if (!window.axios) throw new Error("请先引入 axios@1.4.0 脚本!");
const service = axios.create({
baseURL: "",
timeout: 5000,
headers: {
"Content-Type": "application/json;charset=utf-8"
}
});
// -------------------------- 请求拦截器:自动携带 Token --------------------------
service.interceptors.request.use(
(config) => {
const token = localStorage.getItem("token");
if (token) {
config.headers["Authorization"] = token;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// -------------------------- 响应拦截器:统一处理结果 --------------------------
service.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
let errorMsg = "请求失败,请稍后重试";
if (error.response) {
switch (error.response.status) {
case 401:
errorMsg = "Token 已过期,请重新登录";
localStorage.removeItem("token");
window.location.href = "/admin/login.html";
break;
case 403:
errorMsg = "暂无权限访问该接口";
break;
case 500:
errorMsg = "服务器内部错误";
break;
default:
errorMsg = error.response.data?.msg || errorMsg;
}
} else if (error.request) {
errorMsg = "网络异常,请检查网络连接";
}
console.error("接口请求错误:", errorMsg);
return Promise.reject(error);
}
);
// -------------------------- 封装常用请求方法get/post/put/delete --------------------------
const request = {
// GET
get(url, params = {}) {
return service.get(url, { params });
},
// POST
post(url, data = {}) {
return service.post(url, data);
},
// PUT
put(url, data = {}) {
return service.put(url, data);
},
// DELETE
delete(url, params = {}) {
return service.delete(url, { params });
}
};
window.request = request;

View File

@@ -0,0 +1,55 @@
// assets/js/confirmModal.js
(function(window) {
// 全局确认弹窗函数
window.showConfirmModal = function(options = {}) {
// 默认配置
const {
title = '系统提示',
content = '确定执行此操作吗?',
onConfirm = () => {}, // 确认回调
onCancel = () => {} // 取消回调(可选)
} = options;
// 生成唯一ID避免重复
const modalId = `confirm-modal-${Date.now()}`;
// 动态创建模态框DOM
const modalHtml = `
<div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5">${title}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">${content}</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="${modalId}-confirm">确认</button>
</div>
</div>
</div>
</div>
`;
// 插入到页面
document.body.insertAdjacentHTML('beforeend', modalHtml);
// 初始化并显示弹窗
const modal = new bootstrap.Modal(document.getElementById(modalId));
modal.show();
// 绑定确认按钮事件
document.getElementById(`${modalId}-confirm`).addEventListener('click', () => {
onConfirm(); // 执行确认逻辑
modal.hide();
});
// 弹窗关闭后清理DOM
const modalElement = document.getElementById(modalId);
modalElement.addEventListener('hidden.bs.modal', () => {
onCancel(); // 执行取消逻辑(可选)
modalElement.remove(); // 移除DOM避免冗余
});
};
})(window);

View File

@@ -0,0 +1,145 @@
if (!window.Vue) {
const vueScript = document.createElement('script');
vueScript.src = 'https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js';
document.head.appendChild(vueScript);
}
if (!document.querySelector('link[href*="bootstrap-icons"]')) {
const iconLink = document.createElement('link');
iconLink.rel = 'stylesheet';
iconLink.href = 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css';
document.head.appendChild(iconLink);
}
const style = document.createElement('style');
style.textContent = `
.h5-message-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
pointer-events: none;
}
.h5-message {
display: flex;
align-items: center;
padding: 14px 24px;
border-radius: 8px;
color: #fff;
font-size: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
animation: h5MsgShow 0.4s ease-out forwards;
}
.h5-message.success { background-color: rgba(40, 167, 69, 0.95); }
.h5-message.error { background-color: rgba(220, 53, 69, 0.95); }
.h5-message.warning { background-color: rgba(255, 193, 7, 0.95); color: #333; }
.h5-message.info { background-color: rgba(13, 110, 253, 0.95); }
.h5-message-icon {
margin-right: 10px;
font-size: 20px;
}
@keyframes h5MsgShow {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.h5-message.hide { animation: h5MsgHide 0.4s ease-in forwards; }
@keyframes h5MsgHide {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
`;
document.head.appendChild(style);
const messageTemplate = `
<div class="h5-message" :class="[type, { hide: !visible }]">
<i class="h5-message-icon" :class="iconClass"></i>
<span>{{ message }}</span>
</div>
`;
const messageInstances = [];
function showMessage(options) {
if (typeof options === 'string') {
options = { message: options };
}
const config = {
message: '',
type: 'info',
duration: 3000,
...options,
duration: Math.max(1000, options.duration || 3000)
};
const checkVueLoaded = setInterval(() => {
if (window.Vue) {
clearInterval(checkVueLoaded);
const container = document.createElement('div');
container.className = 'h5-message-container';
document.body.appendChild(container);
const app = Vue.createApp({
template: messageTemplate,
data() {
return {
message: config.message,
type: config.type,
visible: true
};
},
computed: {
iconClass() {
const icons = {
success: 'bi bi-check-circle',
error: 'bi bi-exclamation-circle',
warning: 'bi bi-exclamation-triangle',
info: 'bi bi-info-circle'
};
return icons[this.type] || icons.info;
}
},
mounted() {
const showTimer = setTimeout(() => {
this.visible = false;
const hideTimer = setTimeout(() => {
const index = messageInstances.indexOf(app);
if (index > -1) {
messageInstances.splice(index, 1);
}
app.unmount(container);
document.body.removeChild(container);
clearTimeout(hideTimer);
}, 400);
clearTimeout(showTimer);
}, config.duration);
}
});
const instance = app.mount(container);
messageInstances.push(instance);
}
}, 50);
setTimeout(() => {
clearInterval(checkVueLoaded);
if (!window.Vue) {
alert(config.message);
}
}, 1000);
}
window.$message = showMessage;
['success', 'error', 'warning', 'info'].forEach(type => {
window.$message[type] = (message, duration) => {
window.$message({
message,
type,
// 确保时长有效用户未传则用默认3秒
duration: duration ? Math.max(1000, duration) : 500
});
};
});

View File

@@ -0,0 +1,593 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>反馈管理</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
</head>
<body id="app">
<div class="main-container">
<div class="table-container">
<h4 class="mb-3">反馈管理</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
名称
</span>
<input
v-model="searchParams.title"
type="text"
class="form-control"
placeholder="请输入名称"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
流程
</span>
<select
v-model="searchParams.status"
class="form-select"
@change="fetchData()"
>
<option value="">全部</option>
<option value="0">待处理</option>
<option value="1">处理中</option>
<option value="2">已完成</option>
<option value="3">已关闭</option>
</select>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<!-- <div class="mb-2">-->
<!-- <button class="btn btn-info" @click="openAddModal()">-->
<!-- <i class="bi bi-plus-circle me-1"></i> 新增-->
<!-- </button>-->
<!-- </div>-->
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<!-- 全选复选框 -->
<th style="width: 50px;">
<input
type="checkbox"
class="form-check-input"
v-model="selectAll"
@change="toggleSelectAll()"
>
</th>
<th>反馈问题</th>
<th>反馈详情</th>
<th>反馈用户</th>
<th>联系方式</th>
<th>流程</th>
<th>创建时间</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id"
:class="{ selected: selectedIds.includes(item.id) }">
<td>
<input
type="checkbox"
class="form-check-input"
v-model="selectedIds"
:value="item.id"
@change="toggleSelectItem(item.id)"
>
</td>
<td>{{ item.title }}</td>
<td class="ellipsis-single">{{ item.content }}</td>
<td>{{ item.nickName }}</td>
<td>{{ item.contact }}</td>
<td>
<span class="badge" :class="item.status === 0 ? 'bg-warning' : (item.status === 2 ? 'bg-success': (item.status === 3 ? 'bg-dark':'bg-info'))">
{{ item.statusName }}
</span>
</td>
<td>{{ formatTime(item.createTime) }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<select
class="form-select"
v-model="batchAction"
:disabled="selectedIds.length === 0"
@change="handleBatchOperation"
style="width: auto; min-width: 160px;"
>
<option value="">-- 批量操作 --</option>
<option value="delete">批量删除</option>
</select>
<button
class="btn btn-secondary"
@click="clearSelected()"
:disabled="selectedIds.length === 0"
>
<i class="bi bi-x-circle me-1"></i> 取消选择
</button>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === pageNum ? 'active' : ''" v-for="page in pageList"
:key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 新增 or 编辑 -->
<div class="modal fade" id="addOrEditModel" tabindex="-1" aria-labelledby="addOrEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditModalLabel">{{ addOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">反馈标题</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.title"
placeholder="请输入名称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">联系方式</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.contact"
placeholder="请输入联系方式">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">反馈内容</label>
<div class="col-sm-9">
<!-- &lt;!&ndash; 富文本编辑器容器 &ndash;&gt;-->
<!-- <div id="contentEditor" style="border: 1px solid #dee2e6; border-radius: 0.375rem;"></div>-->
<!-- &lt;!&ndash; 错误提示 &ndash;&gt;-->
<!-- <div class="invalid-feedback" id="contentError" style="display: none; margin-top: 0.25rem;"></div>-->
<textarea class="form-control" v-model="addOrEditDto.content"></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">流程</label>
<div class="col-sm-9">
<select class="form-control" v-model="addOrEditDto.status">
<option value="0">待处理</option>
<option value="1">处理中</option>
<option value="2">已完成</option>
<option value="3">已关闭</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">反馈用户</label>
<div class="col-sm-9">
<input type="text" class="form-control" readonly v-model="addOrEditDto.nickName">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="saveEntity">保存</button>
</div>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wangeditor@4.7.15/dist/wangEditor.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="/assets/js/axiosRequest.js"></script>
<script src="/assets/js/message.js"></script>
<script src="/assets/js/confirmModal.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [], // 表格数据源
loading: false, // 加载状态
searchParams: {
title: '',
status: '',
},
// 分页参数
pageNum: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
totalPages: 0, // 总页数
// 批量操作
selectedIds: [], // 选中的ID集合
selectAll: false, // 全选状态
batchAction: '', // 批量操作选择
pageRange: 5,
modalInstances: {},
addOrEditTitle: '',
addOrEditDto: {
id: null,
title: null,
content: null,
contact: null,
status: 0,
nickName: 0,
},
editor: null, // WangEditor 实例
}
},
computed: {
// 计算当前显示的页码列表
pageList() {
const list = [];
if (this.totalPages === 0) return list;
// 总页数小于等于显示范围,直接显示所有页码
if (this.totalPages <= this.pageRange) {
for (let i = 1; i <= this.totalPages; i++) {
list.push(i);
}
} else {
// 总页数大于显示范围显示当前页前后2个页码
let start = Math.max(1, this.pageNum - 2);
let end = Math.min(this.totalPages, this.pageNum + 2);
// 确保显示5个页码
if (end - start < this.pageRange - 1) {
if (start === 1) {
end = this.pageRange;
} else if (end === this.totalPages) {
start = this.totalPages - this.pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
}
},
methods: {
formatTime(time) {
if (!time) return '-';
const date = new Date(time);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
async fetchData() {
this.loading = true;
try {
const response = await request.get('/biz/feedback/page', {
...this.searchParams,
current: this.pageNum,
size: this.pageSize
});
console.log(response)
if (response.code === 200) {
this.tableData = response.data.records; // 列表数据
this.total = response.data.total; // 总条数
this.totalPages = response.data.pages; // 总页数
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
this.clearSelected();
}
},
// 切换页码
changePage(page) {
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData();
},
// 重置搜索
resetSearch() {
this.searchParams = {
title: '',
status: '',
};
this.pageNum = 1;
this.fetchData();
},
// 全选/取消全选
toggleSelectAll() {
if (this.selectAll) {
this.selectedIds = this.tableData.map(item => item.id);
} else {
this.selectedIds = [];
}
},
// 单个选中/取消选中
toggleSelectItem(id) {
this.selectAll = this.selectedIds.length === this.tableData.length && this.tableData.length > 0;
},
// 清空选中状态
clearSelected() {
this.selectedIds = [];
this.selectAll = false;
this.batchAction = '';
},
// 处理批量操作
handleBatchOperation() {
if (!this.batchAction || this.selectedIds.length === 0) return;
switch (this.batchAction) {
case 'delete':
this.handleBatchDelete();
break;
}
this.batchAction = '';
},
// 批量删除
async handleBatchDelete() {
showConfirmModal({
title: '删除确认',
content: `确定要删除选中的 ${this.selectedIds.length} 条数据吗?`,
onConfirm: async () => {
try {
const response = await request.post('/biz/feedback/batchDelete', {ids: this.selectedIds});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData();
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 单个删除
async handleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.delete('/biz/feedback/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 打开新增模态框
openAddModal() {
this.addOrEditTitle = '新增';
this.clearForm();
this.modalInstances['addOrEditModel'].show();
},
// 打开编辑模态框
openEditModal(item) {
this.addOrEditTitle = '编辑';
this.addOrEditDto = {...item};
// 延迟回显富文本内容
setTimeout(() => {
if (this.editor) this.editor.txt.html(item.content || '');
}, 300);
this.modalInstances['addOrEditModel'].show();
},
saveEntity() {
let url = (this.addOrEditDto === null || this.addOrEditDto.id === null) ? '/biz/feedback/save' : '/biz/feedback/update';
request.post(url, this.addOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchData();
this.clearForm();
this.modalInstances['addOrEditModel'].hide();
} else {
$message.error('保存失败!', 500);
}
}).catch(() => {
})
},
// 清空表单数据
clearForm() {
this.addOrEditDto = {
id: null,
title: null,
content: null,
contact: null,
status: 0,
nickName: 0,
};
},
// 初始化 WangEditor
initWangEditor() {
const _this = this;
// 获取编辑器容器
const editorDom = document.getElementById('contentEditor');
// 创建编辑器实例
this.editor = new wangEditor(editorDom);
// 编辑器配置
this.editor.config.height = 200; // 高度
this.editor.config.zIndex = 1050; // 层级(确保在模态框上方)
this.editor.config.uploadImgShowBase64 = true; // 图片以 Base64 格式保存(无需后端接口)
this.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重做
];
// 内容变化时同步到 Vue 数据
this.editor.config.onchange = function (html) {
_this.addOrEditDto.content = html;
};
// 创建编辑器
this.editor.create();
},
},
mounted() {
this.fetchData();
const modalIds = ['uploadFileModal', 'addOrEditModel'];
modalIds.forEach(id => {
const modalElement = document.getElementById(id);
if (modalElement) {
this.modalInstances[id] = new bootstrap.Modal(modalElement, {
backdrop: 'static',
keyboard: true
});
}
});
// // 初始化 WangEditor延迟初始化确保DOM加载完成
// setTimeout(() => {
// this.initWangEditor();
// }, 500);
//
// // 监听模态框关闭事件,避免内存泄漏
// const modal = document.getElementById('addOrEditModel');
// modal.addEventListener('hidden.bs.modal', () => {
// if (this.editor) {
// this.editor.txt.clear(); // 清空内容
// document.getElementById('contentEditor').style.borderColor = '#dee2e6';
// document.getElementById('contentError').style.display = 'none';
// }
// });
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,573 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固件管理</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
</head>
<body id="app">
<div class="main-container">
<div class="table-container">
<h4 class="mb-3">固件管理</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
固件名
</span>
<input
v-model="searchParams.firmwareName"
type="text"
class="form-control"
placeholder="请输入固件名称"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
类型
</span>
<select
v-model="searchParams.firmwareType"
class="form-select"
@change="fetchData()"
>
<option value="">全部状态</option>
<option value="1">调参固件</option>
<option value="2">AP固件</option>
<option value="3">INAV固件</option>
</select>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<div class="mb-2">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<!-- 全选复选框 -->
<th style="width: 50px;">
<input
type="checkbox"
class="form-check-input"
v-model="selectAll"
@change="toggleSelectAll()"
>
</th>
<th>固件名</th>
<th>大小(字节)</th>
<th>描述</th>
<th>类型</th>
<th>创建时间</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id"
:class="{ selected: selectedIds.includes(item.id) }">
<td>
<input
type="checkbox"
class="form-check-input"
v-model="selectedIds"
:value="item.id"
@change="toggleSelectItem(item.id)"
>
</td>
<td>{{ item.firmwareName }}</td>
<td>{{ item.firmwareSize }}</td>
<td>{{ item.firmwareDescription }}</td>
<td>{{ item.firmwareTypeName }}</td>
<td>{{ formatTime(item.createTime) }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="openUploadModal(item)" title="上传固件">
<i class="bi bi-cloud-upload-fill"></i>
</button>
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<select
class="form-select"
v-model="batchAction"
:disabled="selectedIds.length === 0"
@change="handleBatchOperation"
style="width: auto; min-width: 160px;"
>
<option value="">-- 批量操作 --</option>
<option value="delete">批量删除</option>
</select>
<button
class="btn btn-secondary"
@click="clearSelected()"
:disabled="selectedIds.length === 0"
>
<i class="bi bi-x-circle me-1"></i> 取消选择
</button>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === pageNum ? 'active' : ''" v-for="page in pageList"
:key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 上传文件 -->
<div class="modal fade" id="uploadFileModal" tabindex="-1" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="uploadFileModalLabel">上传固件</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">选择固件</label>
<div class="col-sm-9">
<input
type="file"
class="form-control"
id="firmwareFile"
name="file"
accept=".bin"
>
<div class="form-text text-muted mt-1">支持 .bin 格式,单个文件不超过 100MB</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="uploadFile">上传</button>
</div>
</div>
</div>
</div>
<!-- 新增 or 编辑 -->
<div class="modal fade" id="addOrEditModel" tabindex="-1" aria-labelledby="addOrEditModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditModalLabel">{{ addOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">固件名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.firmwareName"
placeholder="请输入固件名称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">固件描述</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.firmwareDescription"
placeholder="请输入固件描述">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">固件类型</label>
<div class="col-sm-9">
<select class="form-control" v-model="addOrEditDto.firmwareType">
<option value=1>调参固件</option>
<option value=2>AP固件</option>
<option value=3>INAV固件</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">固件地址</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.downloadUrl"
placeholder="请输入固件地址">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="saveEntity">保存</button>
</div>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="/assets/js/axiosRequest.js"></script>
<script src="/assets/js/message.js"></script>
<script src="/assets/js/confirmModal.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [], // 表格数据源
loading: false, // 加载状态
searchParams: {
firmwareName: '',
firmwareType: '',
},
// 分页参数
pageNum: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
totalPages: 0, // 总页数
// 批量操作
selectedIds: [], // 选中的ID集合
selectAll: false, // 全选状态
batchAction: '', // 批量操作选择
pageRange: 5,
modalInstances: {},
resetPasswordDto: {
userId: null,
nickName: null,
username: null,
password: null,
},
addOrEditTitle: '',
addOrEditDto: {
id: null,
firmwareName: null,
firmwareDescription: null,
firmwareType: 1,
downloadUrl: ''
}
}
},
computed: {
// 计算当前显示的页码列表
pageList() {
const list = [];
if (this.totalPages === 0) return list;
// 总页数小于等于显示范围,直接显示所有页码
if (this.totalPages <= this.pageRange) {
for (let i = 1; i <= this.totalPages; i++) {
list.push(i);
}
} else {
// 总页数大于显示范围显示当前页前后2个页码
let start = Math.max(1, this.pageNum - 2);
let end = Math.min(this.totalPages, this.pageNum + 2);
// 确保显示5个页码
if (end - start < this.pageRange - 1) {
if (start === 1) {
end = this.pageRange;
} else if (end === this.totalPages) {
start = this.totalPages - this.pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
}
},
methods: {
formatTime(time) {
if (!time) return '-';
const date = new Date(time);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
async fetchData() {
this.loading = true;
try {
const response = await request.get('/biz/firmware/page', {
...this.searchParams,
current: this.pageNum,
size: this.pageSize
});
console.log(response)
if (response.code === 200) {
this.tableData = response.data.records; // 列表数据
this.total = response.data.total; // 总条数
this.totalPages = response.data.pages; // 总页数
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
this.clearSelected();
}
},
// 切换页码
changePage(page) {
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData();
},
// 重置搜索
resetSearch() {
this.searchParams = {
firmwareName: '',
firmwareType: '',
};
this.pageNum = 1;
this.fetchData();
},
// 全选/取消全选
toggleSelectAll() {
if (this.selectAll) {
this.selectedIds = this.tableData.map(item => item.id);
} else {
this.selectedIds = [];
}
},
// 单个选中/取消选中
toggleSelectItem(id) {
this.selectAll = this.selectedIds.length === this.tableData.length && this.tableData.length > 0;
},
// 清空选中状态
clearSelected() {
this.selectedIds = [];
this.selectAll = false;
this.batchAction = '';
},
// 处理批量操作
handleBatchOperation() {
if (!this.batchAction || this.selectedIds.length === 0) return;
switch (this.batchAction) {
case 'delete':
this.handleBatchDelete();
break;
}
this.batchAction = '';
},
// 批量删除
async handleBatchDelete() {
showConfirmModal({
title: '删除确认',
content: `确定要删除选中的 ${this.selectedIds.length} 条数据吗?`,
onConfirm: async () => {
try {
const response = await request.post('/biz/firmware/batchDelete', {ids: this.selectedIds});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData();
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 单个删除
async handleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.delete('/biz/firmware/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 打开文件上传模态框
openUploadModal(item) {
this.modalInstances['uploadFileModal'].show();
},
uploadFile() {
request.put("/biz/user/resetPasswordRequest", this.resetPasswordDto)
.then((res) => {
if (res.code === 200) {
$message.success('修改成功!', 500);
this.modalInstances['resetPwdModal'].hide();
} else {
alert('修改失败!');
}
this.resetPasswordDto = {};
});
},
// 打开新增模态框
openAddModal() {
this.addOrEditTitle = '新增';
this.modalInstances['addOrEditModel'].show();
},
// 打开编辑模态框
openEditModal(item) {
this.addOrEditTitle = '编辑';
this.addOrEditDto = item;
this.modalInstances['addOrEditModel'].show();
},
saveEntity() {
let url = (this.addOrEditDto === null || this.addOrEditDto.id === null) ? '/biz/firmware/save' : '/biz/firmware/update';
request.post(url, this.addOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchData();
this.modalInstances['addOrEditModel'].hide();
} else {
$message.error('保存失败!', 500);
}
this.clearForm();
}).catch(() => {
})
},
// 清空表单数据
clearForm() {
this.addOrEditDto = {
id: null,
firmwareName: null,
firmwareDescription: null,
firmwareType: 1,
downloadUrl: ''
};
}
},
mounted() {
this.fetchData();
const modalIds = ['uploadFileModal', 'addOrEditModel'];
modalIds.forEach(id => {
const modalElement = document.getElementById(id);
if (modalElement) {
this.modalInstances[id] = new bootstrap.Modal(modalElement, {
backdrop: 'static',
keyboard: true
});
}
});
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,581 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐私政策</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
</head>
<body id="app">
<div class="main-container">
<div class="table-container">
<h4 class="mb-3">隐私政策</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
名称
</span>
<input
v-model="searchParams.title"
type="text"
class="form-control"
placeholder="请输入名称"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
是否显示
</span>
<select
v-model="searchParams.visible"
class="form-select"
@change="fetchData()"
>
<option value="">全部状态</option>
<option value="1">显示</option>
<option value="2">隐藏</option>
</select>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<div class="mb-2">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<!-- 全选复选框 -->
<th style="width: 50px;">
<input
type="checkbox"
class="form-check-input"
v-model="selectAll"
@change="toggleSelectAll()"
>
</th>
<th>名称</th>
<th>是否显示</th>
<th>排序</th>
<th>创建时间</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id"
:class="{ selected: selectedIds.includes(item.id) }">
<td>
<input
type="checkbox"
class="form-check-input"
v-model="selectedIds"
:value="item.id"
@change="toggleSelectItem(item.id)"
>
</td>
<td>{{ item.title }}</td>
<td>
<span class="badge" :class="item.visible === 1 ? 'bg-success' : 'bg-danger'">
{{ item.visible === 1 ? '启用' : '禁用' }}
</span>
</td>
<td>{{ item.sort }}</td>
<td>{{ formatTime(item.createTime) }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<select
class="form-select"
v-model="batchAction"
:disabled="selectedIds.length === 0"
@change="handleBatchOperation"
style="width: auto; min-width: 160px;"
>
<option value="">-- 批量操作 --</option>
<option value="delete">批量删除</option>
</select>
<button
class="btn btn-secondary"
@click="clearSelected()"
:disabled="selectedIds.length === 0"
>
<i class="bi bi-x-circle me-1"></i> 取消选择
</button>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === pageNum ? 'active' : ''" v-for="page in pageList"
:key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 新增 or 编辑 -->
<div class="modal fade" id="addOrEditModel" tabindex="-1" aria-labelledby="addOrEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditModalLabel">{{ addOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="addOrEditDto.title"
placeholder="请输入名称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">内容</label>
<div class="col-sm-9">
<!-- 富文本编辑器容器 -->
<div id="contentEditor" style="border: 1px solid #dee2e6; border-radius: 0.375rem;"></div>
<!-- 错误提示 -->
<div class="invalid-feedback" id="contentError" style="display: none; margin-top: 0.25rem;"></div>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">是否显示</label>
<div class="col-sm-9">
<select class="form-control" v-model="addOrEditDto.visible">
<option value=1>显示</option>
<option value=2>隐藏</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">序号</label>
<div class="col-sm-9">
<input type="number" class="form-control" v-model="addOrEditDto.sort"
placeholder="请输入序号">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="saveEntity">保存</button>
</div>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wangeditor@4.7.15/dist/wangEditor.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="/assets/js/axiosRequest.js"></script>
<script src="/assets/js/message.js"></script>
<script src="/assets/js/confirmModal.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [], // 表格数据源
loading: false, // 加载状态
searchParams: {
title: '',
visible: '',
},
// 分页参数
pageNum: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
totalPages: 0, // 总页数
// 批量操作
selectedIds: [], // 选中的ID集合
selectAll: false, // 全选状态
batchAction: '', // 批量操作选择
pageRange: 5,
modalInstances: {},
resetPasswordDto: {
userId: null,
nickName: null,
username: null,
password: null,
},
addOrEditTitle: '',
addOrEditDto: {
id: null,
title: null,
content: null,
visible: 1,
sort: 99
},
editor: null, // WangEditor 实例
}
},
computed: {
// 计算当前显示的页码列表
pageList() {
const list = [];
if (this.totalPages === 0) return list;
// 总页数小于等于显示范围,直接显示所有页码
if (this.totalPages <= this.pageRange) {
for (let i = 1; i <= this.totalPages; i++) {
list.push(i);
}
} else {
// 总页数大于显示范围显示当前页前后2个页码
let start = Math.max(1, this.pageNum - 2);
let end = Math.min(this.totalPages, this.pageNum + 2);
// 确保显示5个页码
if (end - start < this.pageRange - 1) {
if (start === 1) {
end = this.pageRange;
} else if (end === this.totalPages) {
start = this.totalPages - this.pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
}
},
methods: {
formatTime(time) {
if (!time) return '-';
const date = new Date(time);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
async fetchData() {
this.loading = true;
try {
const response = await request.get('/biz/privacy_policy/page', {
...this.searchParams,
current: this.pageNum,
size: this.pageSize
});
console.log(response)
if (response.code === 200) {
this.tableData = response.data.records; // 列表数据
this.total = response.data.total; // 总条数
this.totalPages = response.data.pages; // 总页数
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
this.clearSelected();
}
},
// 切换页码
changePage(page) {
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData();
},
// 重置搜索
resetSearch() {
this.searchParams = {
title: '',
visible: '',
};
this.pageNum = 1;
this.fetchData();
},
// 全选/取消全选
toggleSelectAll() {
if (this.selectAll) {
this.selectedIds = this.tableData.map(item => item.id);
} else {
this.selectedIds = [];
}
},
// 单个选中/取消选中
toggleSelectItem(id) {
this.selectAll = this.selectedIds.length === this.tableData.length && this.tableData.length > 0;
},
// 清空选中状态
clearSelected() {
this.selectedIds = [];
this.selectAll = false;
this.batchAction = '';
},
// 处理批量操作
handleBatchOperation() {
if (!this.batchAction || this.selectedIds.length === 0) return;
switch (this.batchAction) {
case 'delete':
this.handleBatchDelete();
break;
}
this.batchAction = '';
},
// 批量删除
async handleBatchDelete() {
showConfirmModal({
title: '删除确认',
content: `确定要删除选中的 ${this.selectedIds.length} 条数据吗?`,
onConfirm: async () => {
try {
const response = await request.post('/biz/privacy_policy/batchDelete', {ids: this.selectedIds});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData();
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 单个删除
async handleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.delete('/biz/privacy_policy/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 打开新增模态框
openAddModal() {
this.addOrEditTitle = '新增';
this.clearForm();
this.modalInstances['addOrEditModel'].show();
},
// 打开编辑模态框
openEditModal(item) {
this.addOrEditTitle = '编辑';
this.addOrEditDto = {...item};
// 延迟回显富文本内容
setTimeout(() => {
if (this.editor) this.editor.txt.html(item.content || '');
}, 300);
this.modalInstances['addOrEditModel'].show();
},
saveEntity() {
let url = (this.addOrEditDto === null || this.addOrEditDto.id === null) ? '/biz/privacy_policy/save' : '/biz/privacy_policy/update';
request.post(url, this.addOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchData();
this.modalInstances['addOrEditModel'].hide();
} else {
$message.error('保存失败!', 500);
}
this.clearForm();
}).catch(() => {
})
},
// 清空表单数据
clearForm() {
this.addOrEditDto = {
id: null,
title: null,
content: null,
visible: 1,
sort: 99
};
},
// 初始化 WangEditor
initWangEditor() {
const _this = this;
// 获取编辑器容器
const editorDom = document.getElementById('contentEditor');
// 创建编辑器实例
this.editor = new wangEditor(editorDom);
// 编辑器配置
this.editor.config.height = 200; // 高度
this.editor.config.zIndex = 1050; // 层级(确保在模态框上方)
this.editor.config.uploadImgShowBase64 = true; // 图片以 Base64 格式保存(无需后端接口)
this.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重做
];
// 内容变化时同步到 Vue 数据
this.editor.config.onchange = function (html) {
_this.addOrEditDto.content = html;
};
// 创建编辑器
this.editor.create();
},
},
mounted() {
this.fetchData();
const modalIds = ['uploadFileModal', 'addOrEditModel'];
modalIds.forEach(id => {
const modalElement = document.getElementById(id);
if (modalElement) {
this.modalInstances[id] = new bootstrap.Modal(modalElement, {
backdrop: 'static',
keyboard: true
});
}
});
// 初始化 WangEditor延迟初始化确保DOM加载完成
setTimeout(() => {
this.initWangEditor();
}, 500);
// 监听模态框关闭事件,避免内存泄漏
const modal = document.getElementById('addOrEditModel');
modal.addEventListener('hidden.bs.modal', () => {
if (this.editor) {
this.editor.txt.clear(); // 清空内容
document.getElementById('contentEditor').style.borderColor = '#dee2e6';
document.getElementById('contentError').style.display = 'none';
}
});
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,923 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教程管理</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 谷歌 Material Icons 库 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- 引入Pickr颜色选择库样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
<!-- 颜色选择器适配样式 -->
<style>
.pickr-container {
width: 100%;
}
.pickr .pcr-app {
margin-top: 5px;
z-index: 1060;
}
.pickr .pcr-button {
width: 100%;
}
.pickr .pcr-interaction input.pcr-input {
display: none;
}
.ellipsis-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
</style>
</head>
<body id="app">
<div class="main-container row">
<div class="col-sm-4">
<div class="table-container">
<h4 class="mb-3">分类管理</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
名称
</span>
<input
v-model="categorySearchParams.categoryTitle"
type="text"
class="form-control"
placeholder="请输入名称"
@keyup.enter="fetchCategoryData()"
>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchCategoryData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="categoryResetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<div class="mb-2">
<button class="btn btn-info" @click="categoryOpenAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<th>名称</th>
<th>颜色</th>
<th>置首</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="categoryLoading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status"
style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="categoryTableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in categoryTableData" :key="item.id">
<td>{{ item.categoryTitle }}</td>
<td>
<div
style="width: 40px; height: 30px; border: 1px solid #ddd; border-radius: 4px;"
:style="{ backgroundColor: item.color || '#ffffff' }"
></div>
</td>
<td>
<span class="badge" :class="item.firstStatus === 1 ? 'bg-success' : 'bg-info'">
{{ item.firstStatus === 1 ? '置首' : '不置首' }}
</span>
</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="categoryQueryData(item)">
<i class="bi bi-box-arrow-right"></i>
</button>
<button class="btn btn-sm btn-primary" @click="categoryOpenEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="categoryHandleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: categoryPageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(categoryPageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === categoryPageNum ? 'active' : ''"
v-for="page in getPageList(categoryPageNum, categoryTotalPages, categoryPageRange)"
:key="page">
<a class="page-link" href="#" @click.prevent="categoryChangePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: categoryPageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(categoryPageNum + 1)">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="table-container">
<h4 class="mb-3">教程管理</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
名称
</span>
<input
v-model="searchParams.tutorialTitle"
type="text"
class="form-control"
placeholder="请输入名称"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
类型
</span>
<select
v-model="searchParams.status"
class="form-select"
@change="fetchData()"
>
<option value="">全部状态</option>
<option value="1">启用</option>
<option value="2">关闭</option>
</select>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<div class="mb-2">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<th>名称</th>
<th>描述</th>
<th>推荐</th>
<th>状态</th>
<th>查看次数</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status"
style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id">
<td>{{ item.tutorialTitle }}</td>
<td class="ellipsis-single">{{ item.description }}</td>
<td>
<span class="badge" :class="item.recommendStatus === 1 ? 'bg-success' : 'bg-info'">
{{ item.recommendStatus === 1 ? '推荐' : '不推荐' }}
</span>
</td>
<td>
<span class="badge" :class="item.status === 1 ? 'bg-success' : 'bg-danger'">
{{ item.status === 1 ? '启用' : '禁用' }}
</span>
</td>
<td>{{ item.viewCount }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === pageNum ? 'active' : ''"
v-for="page in getPageList(pageNum, totalPages, pageRange)"
:key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- 分类 新增 or 编辑 -->
<div class="modal fade" id="addOrEditCategoryModel" tabindex="-1" aria-labelledby="addOrEditCategoryModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditCategoryModalLabel">{{ categoryAddOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">图标</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="categoryAddOrEditDto.icon"
placeholder="请输入图标">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">颜色</label>
<div class="col-sm-9">
<div id="colorPickerContainer" style="border: 1px #dee2e6 solid"></div>
<input
type="hidden"
v-model="categoryAddOrEditDto.color"
id="categoryColorValue"
>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">分类名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" v-model="categoryAddOrEditDto.categoryTitle"
placeholder="请输入分类名称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">描述</label>
<div class="col-sm-9">
<textarea class="form-control" v-model="categoryAddOrEditDto.description"
placeholder="请输入描述"></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">是否置首</label>
<div class="col-sm-9">
<select class="form-control" v-model="categoryAddOrEditDto.firstStatus">
<option value=0>不置首</option>
<option value=1>置首</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">状态</label>
<div class="col-sm-9">
<select class="form-control" v-model="categoryAddOrEditDto.status">
<option value=1>启用</option>
<option value=2>关闭</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">语言</label>
<div class="col-sm-9">
<select class="form-control" v-model="categoryAddOrEditDto.lang">
<option value='zh'>中文</option>
<option value='en'>英文</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="categorySaveEntity">保存</button>
</div>
</div>
</div>
</div>
<!-- 新增 or 编辑 -->
<div class="modal fade" id="addOrEditModel" tabindex="-1" aria-labelledby="addOrEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditModalLabel">{{ addOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">教程分类</label>
<div class="col-sm-10">
<select class="form-control" v-model="addOrEditDto.categoryId">
<option v-for="(item, index) in categoryTableData" :value="item.id">{{item.categoryTitle}}</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">教程名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.tutorialTitle"
placeholder="请输入教程名称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">教程描述</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.description"
placeholder="请输入教程描述">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">教程详情</label>
<div class="col-sm-10">
<!-- 富文本编辑器容器 -->
<div id="tutorialContentEditor" style="border: 1px solid #dee2e6; border-radius: 0.375rem;"></div>
<!-- 错误提示 -->
<div class="invalid-feedback" id="contentError" style="display: none; margin-top: 0.25rem;"></div>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">是否推荐</label>
<div class="col-sm-10">
<select class="form-control" v-model="addOrEditDto.recommendStatus">
<option value=0>不推荐</option>
<option value=1>推荐</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">状态</label>
<div class="col-sm-10">
<select class="form-control" v-model="addOrEditDto.status">
<option value=1>启用</option>
<option value=2>关闭</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">语言</label>
<div class="col-sm-10">
<select class="form-control" v-model="addOrEditDto.lang">
<option value='zh'>中文</option>
<option value='en'>英文</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="saveEntity">保存</button>
</div>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入Pickr颜色选择库核心JS -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="https://unpkg.com/wangeditor@4.7.15/dist/wangEditor.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="/assets/js/axiosRequest.js"></script>
<script src="/assets/js/message.js"></script>
<script src="/assets/js/confirmModal.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [], // 表格数据源
loading: false, // 加载状态
searchParams: {
tutorialTitle: '',
status: '',
},
// 分页参数
pageNum: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
totalPages: 0, // 总页数
pageRange: 5,
modalInstances: {},
editor: null, // WangEditor 实例
addOrEditTitle: '',
addOrEditDto: {
id: null,
tutorialTitle: null,
description: null,
content: null,
status: 1,
recommendStatus: 1,
lang: 'zh',
categoryId: 0,
},
// 教程分类
categoryTableData: [], // 表格数据源
categoryLoading: false, // 加载状态
categorySearchParams: {
categoryTitle: '',
status: '',
},
// 分页参数
categoryPageNum: 1, // 当前页码
categoryPageSize: 10, // 每页条数
categoryTotal: 0, // 总数据量
categoryTotalPages: 0, // 总页数
categoryPageRange: 5,
categoryAddOrEditTitle: '',
categoryAddOrEditDto: {
id: null,
icon: null,
color: '#ffffff', // 默认白色
categoryTitle: null,
description: null,
firstStatus: 0,
status: 1,
lang: 'zh',
},
}
},
methods: {
getPageList(currentPage, totalPages, pageRange) {
const list = [];
if (totalPages === 0) return list;
if (totalPages <= pageRange) {
for (let i = 1; i <= totalPages; i++) {
list.push(i);
}
} else {
let start = Math.max(1, currentPage - 2);
let end = Math.min(totalPages, currentPage + 2);
if (end - start < pageRange - 1) {
if (start === 1) {
end = pageRange;
} else if (end === totalPages) {
start = totalPages - pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
},
// 教程分类
async fetchCategoryData() {
this.categoryLoading = true;
try {
const response = await request.get('/biz/tutorial/category/page', {
...this.categorySearchParams,
current: this.categoryPageNum,
size: this.categoryPageSize
});
if (response.code === 200) {
this.categoryTableData = response.data.records;
this.categoryTotal = response.data.total;
this.categoryTotalPages = response.data.pages;
}
} catch (error) {
this.categoryTableData = [];
this.categoryTotal = 0;
this.categoryTotalPages = 0;
} finally {
this.categoryLoading = false;
}
},
// 切换页码
categoryChangePage(page) {
if (page < 1 || page > this.categoryTotalPages || page === this.categoryPageNum) return;
this.categoryPageNum = page;
this.fetchCategoryData();
},
// 重置搜索
categoryResetSearch() {
this.categorySearchParams = {
categoryTitle: '',
};
this.categoryPageNum = 1;
this.fetchCategoryData();
},
// 单个删除
async categoryHandleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.delete('/biz/tutorial/category/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchCategoryData();
}
} catch (error) {
$message.error('删除失败,请重试!');
}
}
});
},
categoryQueryData(item) {
this.searchParams.categoryId = item.id;
this.fetchData();
},
// 打开新增模态框
categoryOpenAddModal() {
this.categoryAddOrEditTitle = '新增分类';
this.categoryClearForm(); // 重置表单默认值
this.modalInstances['addOrEditCategoryModel'].show();
},
// 打开编辑模态框
categoryOpenEditModal(item) {
this.categoryAddOrEditTitle = '编辑分类';
this.categoryAddOrEditDto = {...item}; // 深拷贝避免引用问题
this.modalInstances['addOrEditCategoryModel'].show();
},
categorySaveEntity() {
let url = (this.categoryAddOrEditDto.id === null) ? '/biz/tutorial/category/save' : '/biz/tutorial/category/update';
request.post(url, this.categoryAddOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchCategoryData();
this.modalInstances['addOrEditCategoryModel'].hide();
} else {
$message.error('保存失败!', 500);
}
}).catch(() => {
$message.error('网络错误,请重试!');
})
},
// 清空表单数据
categoryClearForm() {
this.categoryAddOrEditDto = {
id: null,
icon: null,
color: '#ffffff',
categoryTitle: null,
description: '',
type: 'category',
firstStatus: 0,
status: 1,
lang: 'zh',
};
},
// =========================== 教程 =========================
async fetchData() {
this.loading = true;
try {
const response = await request.get('/biz/tutorial/page', {
...this.searchParams,
current: this.pageNum,
size: this.pageSize
});
if (response.code === 200) {
this.tableData = response.data.records;
this.total = response.data.total;
this.totalPages = response.data.pages;
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
}
},
// 切换页码
changePage(page) {
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData();
},
// 重置搜索
resetSearch() {
this.searchParams = {
tutorialTitle: '',
status: '',
};
this.pageNum = 1;
this.fetchData();
},
// 单个删除
async handleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.delete('/biz/tutorial/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData();
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 打开新增模态框
openAddModal() {
this.addOrEditTitle = '新增';
this.clearForm();
this.addOrEditDto.categoryId = this.categoryTableData[0]?.id;
this.modalInstances['addOrEditModel'].show();
},
// 打开编辑模态框
openEditModal(item) {
this.addOrEditTitle = '编辑';
this.addOrEditDto = {...item};
// 延迟回显富文本内容
setTimeout(() => {
if (this.editor) this.editor.txt.html(item.content || '');
}, 300);
this.modalInstances['addOrEditModel'].show();
},
saveEntity() {
let url = (this.addOrEditDto.id === null) ? '/biz/tutorial/save' : '/biz/tutorial/update';
request.post(url, this.addOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchData();
this.modalInstances['addOrEditModel'].hide();
} else {
$message.error('保存失败!', 500);
}
this.clearForm();
}).catch(() => {
$message.error('网络错误,请重试!');
})
},
// 清空表单数据
clearForm() {
this.addOrEditDto = {
id: null,
tutorialTitle: null,
description: null,
content: '',
status: 1,
recommendStatus: 1,
lang: 'zh',
};
},
createColorPicker() {
const container = document.getElementById('colorPickerContainer');
container.innerHTML = '<div id="categoryColorPicker" class="pickr-container"></div>';
// 创建新实例
return Pickr.create({
el: '#categoryColorPicker',
theme: 'nano',
default: this.categoryAddOrEditDto.color || '#dee2e6',
swatches: [
'#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
'#ffff00', '#ff7f50', '#98fb98', '#87ceeb', '#dda0dd'
],
components: {
preview: true,
opacity: false,
hue: true,
interaction: {
hex: true,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: true,
clear: true,
save: true
}
}
});
},
// 初始化 WangEditor
initWangEditor() {
const _this = this;
// 获取编辑器容器
const editorDom = document.getElementById('tutorialContentEditor');
// 创建编辑器实例
this.editor = new wangEditor(editorDom);
// 编辑器配置
this.editor.config.height = 200; // 高度
this.editor.config.zIndex = 1050; // 层级(确保在模态框上方)
this.editor.config.uploadImgShowBase64 = true; // 图片以 Base64 格式保存(无需后端接口)
this.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重做
];
// 内容变化时同步到 Vue 数据
this.editor.config.onchange = function (html) {
_this.addOrEditDto.content = html;
};
// 创建编辑器
this.editor.create();
},
},
mounted() {
this.fetchData();
this.fetchCategoryData();
// 初始化模态框
const modalIds = ['addOrEditModel', 'addOrEditCategoryModel'];
modalIds.forEach(id => {
const modalElement = document.getElementById(id);
if (modalElement) {
this.modalInstances[id] = new bootstrap.Modal(modalElement, {
backdrop: 'static',
keyboard: true
});
}
});
// 修复颜色选择器多次触发问题
const categoryModal = document.getElementById('addOrEditCategoryModel');
let pickrInstance = null; // 用局部变量存储实例,避免全局污染
categoryModal.addEventListener('shown.bs.modal', () => {
if (pickrInstance) {
pickrInstance.destroy();
}
pickrInstance = this.createColorPicker();
pickrInstance.on('change', (color) => {
this.categoryAddOrEditDto.color = color.toHEXA().toString();
});
pickrInstance.on('save', (color) => {
this.categoryAddOrEditDto.color = color.toHEXA().toString();
pickrInstance.hide();
});
pickrInstance.on('clear', () => {
this.categoryAddOrEditDto.color = '#dee2e6';
});
});
// 模态框关闭时彻底清理实例和DOM
categoryModal.addEventListener('hidden.bs.modal', () => {
if (pickrInstance) {
pickrInstance.destroy();
pickrInstance = null; // 重置实例
}
// 清空容器确保下次打开是全新DOM
document.getElementById('colorPickerContainer').innerHTML = '';
});
// 初始化 WangEditor延迟初始化确保DOM加载完成
setTimeout(() => {
this.initWangEditor();
}, 500);
// 监听模态框关闭事件,避免内存泄漏
const modal = document.getElementById('addOrEditModel');
modal.addEventListener('hidden.bs.modal', () => {
if (this.editor) {
this.editor.txt.clear(); // 清空内容
document.getElementById('tutorialContentEditor').style.borderColor = '#dee2e6';
document.getElementById('contentError').style.display = 'none';
}
});
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,659 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
</head>
<body id="app">
<div class="main-container">
<div class="table-container">
<h4 class="mb-3">用户管理</h4>
<div class="search-bar">
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
昵称
</span>
<input
v-model="searchParams.nickName"
type="text"
class="form-control"
placeholder="请输入昵称"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
用户名
</span>
<input
v-model="searchParams.username"
type="text"
class="form-control"
placeholder="请输入用户名"
@keyup.enter="fetchData()"
>
</div>
</div>
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
状态
</span>
<select
v-model="searchParams.status"
class="form-select"
@change="fetchData()"
>
<option value="">全部状态</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<div class="mb-2">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered ">
<thead class="table-light">
<tr>
<th style="width: 50px;">
<input
type="checkbox"
class="form-check-input"
v-model="selectAll"
@change="toggleSelectAll()"
>
</th>
<th>昵称</th>
<th>用户名</th>
<th>号码</th>
<th>邮箱</th>
<th>状态</th>
<th>创建时间</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id"
:class="{ selected: selectedIds.includes(item.id) }">
<td>
<input
type="checkbox"
class="form-check-input"
v-model="selectedIds"
:value="item.id"
@change="toggleSelectItem(item.id)"
>
</td>
<td>{{ item.nickName }}</td>
<td>{{ item.username }}</td>
<td>{{ item.telephone }}</td>
<td>{{ item.email }}</td>
<td>
<span class="badge" :class="item.status === 1 ? 'bg-success' : 'bg-danger'">
{{ item.status === 1 ? '启用' : '禁用' }}
</span>
</td>
<td>{{ formatTime(item.createTime) }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-warning" @click="openPwdModal(item)">
<i class="bi bi-lock"></i>
</button>
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<select
class="form-select"
v-model="batchAction"
:disabled="selectedIds.length === 0"
@change="handleBatchOperation"
style="width: auto; min-width: 160px;"
>
<option value="">-- 批量操作 --</option>
<option value="delete">批量删除</option>
<option value="enable">批量启用</option>
<option value="disable">批量禁用</option>
</select>
<button
class="btn btn-secondary"
@click="clearSelected()"
:disabled="selectedIds.length === 0"
>
<i class="bi bi-x-circle me-1"></i> 取消选择
</button>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item" :class="page === pageNum ? 'active' : ''" v-for="page in pageList"
:key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 修改密码 -->
<div class="modal fade" id="resetPwdModal" tabindex="-1" aria-labelledby="resetPwdModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="resetPwdModalLabel">修改密码</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">昵称</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="resetPasswordDto.nickName" disabled>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="resetPasswordDto.username" disabled>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10 position-relative">
<!-- 密码输入框 -->
<input :type="isPasswordVisible ? 'text' : 'password'" class="form-control pe-10"
id="togglePassword"
placeholder="请输入密码" v-model="resetPasswordDto.password">
<!-- 切换按钮(绝对定位在输入框右侧) -->
<button type="button"
@click="togglePasswordVisibility"
class="btn btn-transparent position-absolute end-0 top-0 h-100 px-3 border-0 bg-transparent"
id="toggleBtn">
<i :class="isPasswordVisible ? 'bi bi-eye-slash text-secondary' : 'bi bi-eye text-secondary'"
id="toggleIcon"></i>
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="resetPwd">修改</button>
</div>
</div>
</div>
</div>
<!-- 新增 or 编辑 -->
<div class="modal fade" id="addOrEditModel" tabindex="-1" aria-labelledby="addOrEditModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="addOrEditModalLabel">{{ addOrEditTitle }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">昵称</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.nickName"
placeholder="请输入昵称">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.username"
placeholder="请输入用户名">
</div>
</div>
<div class="mb-3 row" v-if="addOrEditDto.id == null">
<label class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" v-model="addOrEditDto.password"
placeholder="请输入密码">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.telephone"
placeholder="请输入号码">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="addOrEditDto.email"
placeholder="请输入邮箱">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click.prevent="saveUser">保存</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/axiosRequest.js"></script>
<script src="/assets/js/message.js"></script>
<script src="/assets/js/confirmModal.js"></script>
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [],
loading: false,
searchParams: {
nickName: '',
username: '',
status: '',
},
pageNum: 1,
pageSize: 10,
total: 0,
totalPages: 0,
selectedIds: [],
selectAll: false,
batchAction: '',
pageRange: 5,
modalInstances: {},
resetPasswordDto: {
userId: null,
nickName: null,
username: null,
password: null,
},
isPasswordVisible: false,
addOrEditTitle: '',
addOrEditDto: {
id: null,
username: null,
nickName: '',
password: null,
status: 1,
email: '',
telephone: ''
}
}
},
computed: {
// 计算当前显示的页码列表
pageList() {
const list = [];
if (this.totalPages === 0) return list;
if (this.totalPages <= this.pageRange) {
for (let i = 1; i <= this.totalPages; i++) {
list.push(i);
}
} else {
let start = Math.max(1, this.pageNum - 2);
let end = Math.min(this.totalPages, this.pageNum + 2);
if (end - start < this.pageRange - 1) {
if (start === 1) {
end = this.pageRange;
} else if (end === this.totalPages) {
start = this.totalPages - this.pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
}
},
methods: {
formatTime(time) {
if (!time) return '-';
const date = new Date(time);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
async fetchData() {
this.loading = true;
try {
const response = await request.get('/biz/user/page', {
...this.searchParams,
current: this.pageNum,
size: this.pageSize
});
console.log(response)
if (response.code === 200) {
this.tableData = response.data.records;
this.total = response.data.total;
this.totalPages = response.data.pages;
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
this.clearSelected();
}
},
// 切换页码
changePage(page) {
// 边界判断
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData();
},
// 重置搜索
resetSearch() {
this.searchParams = {
nickName: '',
username: '',
status: '',
};
this.pageNum = 1;
this.fetchData();
},
// 全选/取消全选
toggleSelectAll() {
if (this.selectAll) {
this.selectedIds = this.tableData.map(item => item.id);
} else {
this.selectedIds = [];
}
},
// 单个选中/取消选中
toggleSelectItem(id) {
// 当选中状态变化时,更新全选状态
this.selectAll = this.selectedIds.length === this.tableData.length && this.tableData.length > 0;
},
// 清空选中状态
clearSelected() {
this.selectedIds = [];
this.selectAll = false;
this.batchAction = ''; // 重置批量操作选择
},
// 处理批量操作
handleBatchOperation() {
if (!this.batchAction || this.selectedIds.length === 0) return;
switch (this.batchAction) {
case 'delete':
this.handleBatchDelete();
break;
case 'enable':
this.handleBatchStatus(1);
break;
case 'disable':
this.handleBatchStatus(0);
break;
}
// 执行操作后重置选择
this.batchAction = '';
},
// 批量删除
async handleBatchDelete() {
showConfirmModal({
title: '删除确认',
content: `确定要删除选中的 ${this.selectedIds.length} 条数据吗?`,
onConfirm: async () => {
try {
const response = await request.post('/biz/user/batchDelete', {ids: this.selectedIds});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 批量修改状态(启用/禁用)
async handleBatchStatus(status) {
showConfirmModal({
title: '提示',
content: '确认更新这些数据吗?',
onConfirm: async () => {
try {
const response = await request.post('/biz/user/batchStatus', {
ids: this.selectedIds,
status: status
});
if (response.code === 200) {
$message.success(`${status === 1 ? '启用' : '禁用'}选中数据!`);
this.fetchData();
}
} catch (error) {
console.error('批量更新状态失败:', error);
$message.error('操作失败,请重试!');
}
}
});
},
// 单个删除
async handleDelete(id) {
showConfirmModal({
title: '删除确认',
content: '确定要删除这条数据吗?',
onConfirm: async () => {
try {
const response = await request.post('/biz/user/delete', {id});
if (response.code === 200) {
$message.success("删除成功");
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
$message.error('删除失败,请重试!');
}
}
});
},
// 打开重置密码墨台框
openPwdModal(item) {
console.log(item)
this.resetPasswordDto.userId = item.id;
this.resetPasswordDto.username = item.username;
this.resetPasswordDto.nickName = item.nickName;
this.resetPasswordDto.password = '';
this.modalInstances['resetPwdModal'].show();
},
resetPwd() {
request.put("/biz/user/resetPasswordRequest", this.resetPasswordDto)
.then((res) => {
if (res.code === 200) {
$message.success('修改成功!', 500);
this.modalInstances['resetPwdModal'].hide();
} else {
$message.error('修改失败,请重试!');
}
this.resetPasswordDto = {};
}).catch((error) => {
$message.error('修改失败,请重试!');
})
},
// 打开新增模态框
openAddModal() {
this.addOrEditTitle = '新增';
this.clearForm();
this.modalInstances['addOrEditModel'].show();
},
// 打开编辑模态框
openEditModal(item) {
this.clearForm();
this.addOrEditTitle = '编辑';
this.addOrEditDto = item;
this.modalInstances['addOrEditModel'].show();
},
saveUser() {
let url = (this.addOrEditDto === null || this.addOrEditDto.id === null) ? '/biz/user/save' : '/biz/user/update';
request.post(url, this.addOrEditDto)
.then((res) => {
if (res.code === 200) {
$message.success('保存成功!', 500);
this.fetchData();
this.modalInstances['addOrEditModel'].hide();
} else {
$message.error('保存失败!', 500);
}
this.clearForm();
}).catch(() => {
})
},
togglePasswordVisibility() {
this.isPasswordVisible = !this.isPasswordVisible;
},
// 清空表单数据
clearForm() {
this.addOrEditDto = {
id: null,
username: null,
nickName: '',
password: null,
status: 1,
email: '',
telephone: ''
};
}
},
mounted() {
this.fetchData();
const modalIds = ['resetPwdModal', 'addOrEditModel'];
modalIds.forEach(id => {
console.log(id)
const modalElement = document.getElementById(id);
if (modalElement) {
this.modalInstances[id] = new bootstrap.Modal(modalElement, {
backdrop: 'static',
keyboard: true
});
}
});
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/assets/css/dashboard.css" rel="stylesheet">
</head>
<body id="app">
<div class="main-container">
<div class="welcome-card">
<h2>
<i class="bi bi-emoji-smile"></i>
你好,{{ userInfo.realName || userInfo.username }}
</h2>
<p class="mb-0 mt-2">欢迎使用 CoreWing 后台管理系统</p>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="stat-card primary">
<i class="bi bi-people-fill"></i>
<h3>1,234</h3>
<p>用户数</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="stat-card success">
<i class="bi bi-file-earmark-text-fill"></i>
<h3>567</h3>
<p>设备数</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="stat-card warning">
<i class="bi bi-graph-up"></i>
<h3>89%</h3>
<p>固件数</p>
</div>
</div>
</div>
</div>
<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入封装的 axiosRequest.js -->
<script src="/assets/js/axiosRequest.js"></script>
<script>
const {createApp} = Vue;
createApp({
data() {
return {
userInfo: {
username: '',
realName: '',
userId: ''
}
}
},
methods: {
async loadUserInfo() {
// 从 localStorage 获取用户信息
this.userInfo.username = localStorage.getItem('username') || '';
this.userInfo.realName = localStorage.getItem('realName') || '';
this.userInfo.userId = localStorage.getItem('userId') || '';
const token = localStorage.getItem("token");
if (token) {
try {
const response = await request.get('/sys/user/info');
if (response.code === 200) {
const user = response.data;
this.userInfo.username = user.username;
this.userInfo.realName = user.realName || user.username;
this.userInfo.userId = user.id;
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
},
},
mounted() {
// 加载用户信息
this.loadUserInfo();
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -1,494 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--primary-color: #5B5FDE;
--secondary-color: #0EA5E9;
--accent-color: #FF6B6B;
--error-color: #F43F5E;
--success-color: #10B981;
--warning-color: #F59E0B;
--info-color: #3B82F6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3F4F6;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* 侧边栏样式 */
.sidebar {
min-height: 100vh;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 180px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
padding: 18px 12px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header h4 {
font-size: 16px;
font-weight: 700;
margin: 0;
}
.sidebar-header i {
margin-right: 5px;
font-size: 16px;
}
.sidebar-menu {
padding: 12px 8px;
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
padding: 9px 10px;
border-radius: 8px;
margin: 3px 0;
transition: all 0.3s;
font-weight: 500;
font-size: 13px;
display: flex;
align-items: center;
}
.sidebar .nav-link i {
width: 18px;
font-size: 15px;
}
.sidebar .nav-link:hover {
background-color: rgba(255, 255, 255, 0.15);
color: white;
transform: translateX(5px);
}
.sidebar .nav-link.active {
background-color: rgba(255, 255, 255, 0.25);
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sidebar-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 8px;
}
.btn-logout {
width: 100%;
padding: 9px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
transition: all 0.3s;
}
.btn-logout:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
/* 顶部导航栏 */
.navbar {
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 12px 25px;
}
.navbar-brand {
font-size: 18px;
font-weight: 700;
color: #1F2937;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
color: #4B5563;
font-weight: 500;
font-size: 14px;
}
.user-info i {
font-size: 20px;
color: var(--primary-color);
}
/* 主内容区 */
.main-content {
margin-left: 180px;
}
/* 内容区域 */
.content-wrapper {
padding: 25px;
}
/* 欢迎卡片 */
.welcome-card {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
border-radius: 16px;
padding: 35px;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(91, 95, 222, 0.2);
position: relative;
overflow: hidden;
}
.welcome-card::before {
content: '';
position: absolute;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -80px;
right: -80px;
}
.welcome-card h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.welcome-card p {
font-size: 15px;
opacity: 0.95;
position: relative;
z-index: 1;
}
/* 统计卡片 */
.stat-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
border: 1px solid #E5E7EB;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stat-card i {
font-size: 40px;
opacity: 0.9;
margin-bottom: 12px;
}
.stat-card h3 {
font-size: 30px;
font-weight: 700;
margin: 12px 0 6px;
color: #1F2937;
}
.stat-card p {
color: #6B7280;
font-size: 13px;
margin: 0;
}
.stat-card.primary i { color: var(--primary-color); }
.stat-card.success i { color: var(--success-color); }
.stat-card.warning i { color: var(--warning-color); }
.stat-card.info i { color: var(--info-color); }
/* 页面标题 */
.page-title {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin-bottom: 20px;
}
/* 卡片容器 */
.card {
background: white;
border-radius: 12px;
border: 1px solid #E5E7EB;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.card-body {
padding: 25px;
}
/* 响应式 */
@media (max-width: 768px) {
.sidebar {
width: 100%;
position: relative;
min-height: auto;
}
.main-content {
margin-left: 0;
}
.sidebar-footer {
position: static;
margin-top: 15px;
}
.welcome-card {
padding: 25px;
}
.welcome-card h2 {
font-size: 20px;
}
.content-wrapper {
padding: 20px;
}
}
</style>
</head>
<body>
<div id="app">
<!-- 侧边栏 -->
<nav class="sidebar">
<div class="sidebar-header">
<h4>
<i class="bi bi-shield-lock-fill"></i>
CoreWing
</h4>
</div>
<div class="sidebar-menu">
<ul class="nav flex-column">
<li class="nav-item">
<a :class="['nav-link', currentPage === 'dashboard' ? 'active' : '']"
href="#"
@click.prevent="currentPage = 'dashboard'">
<i class="bi bi-speedometer2"></i>
仪表盘
</a>
</li>
<li class="nav-item">
<a :class="['nav-link', currentPage === 'users' ? 'active' : '']"
href="#"
@click.prevent="currentPage = 'users'">
<i class="bi bi-people-fill"></i>
用户管理
</a>
</li>
<li class="nav-item">
<a :class="['nav-link', currentPage === 'settings' ? 'active' : '']"
href="#"
@click.prevent="currentPage = 'settings'">
<i class="bi bi-gear-fill"></i>
系统设置
</a>
</li>
</ul>
</div>
<div class="sidebar-footer">
<button class="btn-logout" @click="handleLogout">
<i class="bi bi-box-arrow-right me-2"></i>
退出登录
</button>
</div>
</nav>
<!-- 主内容区 -->
<main class="main-content">
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<span class="navbar-brand">欢迎回来</span>
<div class="user-info">
<i class="bi bi-person-circle"></i>
<span>{{ userInfo.realName || userInfo.username }}</span>
</div>
</div>
</nav>
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 仪表盘 -->
<div v-if="currentPage === 'dashboard'">
<div class="welcome-card">
<h2>
<i class="bi bi-emoji-smile"></i>
你好,{{ userInfo.realName || userInfo.username }}
</h2>
<p class="mb-0 mt-2">欢迎使用 CoreWing 后台管理系统</p>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="stat-card primary">
<i class="bi bi-people-fill"></i>
<h3>1,234</h3>
<p>总用户数</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="stat-card success">
<i class="bi bi-file-earmark-text-fill"></i>
<h3>567</h3>
<p>文档数量</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="stat-card warning">
<i class="bi bi-graph-up"></i>
<h3>89%</h3>
<p>系统负载</p>
</div>
</div>
</div>
</div>
<!-- 用户管理 -->
<div v-if="currentPage === 'users'">
<h3 class="page-title">用户管理</h3>
<div class="card">
<div class="card-body">
<p>用户管理功能开发中...</p>
</div>
</div>
</div>
<!-- 系统设置 -->
<div v-if="currentPage === 'settings'">
<h3 class="page-title">系统设置</h3>
<div class="card">
<div class="card-body">
<p>系统设置功能开发中...</p>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
userInfo: {
username: '',
realName: '',
userId: ''
},
currentPage: 'dashboard'
}
},
methods: {
async loadUserInfo() {
// 从 localStorage 获取用户信息
this.userInfo.username = localStorage.getItem('username') || '';
this.userInfo.realName = localStorage.getItem('realName') || '';
this.userInfo.userId = localStorage.getItem('userId') || '';
// 也可以从服务器获取最新的用户信息
const token = localStorage.getItem('token');
if (token) {
try {
axios.defaults.headers.common['satoken'] = token;
const response = await axios.get('/sys/user/info');
if (response.data.code === 200) {
const user = response.data.data;
this.userInfo.username = user.username;
this.userInfo.realName = user.realName || user.username;
this.userInfo.userId = user.id;
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
},
async handleLogout() {
if (confirm('确定要退出登录吗?')) {
try {
const token = localStorage.getItem('token');
if (token) {
axios.defaults.headers.common['satoken'] = token;
await axios.post('/sys/user/logout');
}
} catch (error) {
console.error('退出登录失败:', error);
} finally {
// 清除本地存储
localStorage.clear();
// 跳转到登录页
window.location.href = '/admin/login.html';
}
}
},
checkLogin() {
const token = localStorage.getItem('token');
if (!token) {
// 未登录,跳转到登录页
window.location.href = '/admin/login.html';
}
}
},
mounted() {
// 检查登录状态
this.checkLogin();
// 加载用户信息
this.loadUserInfo();
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
<div id="app">
<!-- 侧边栏 -->
<nav class="sidebar">
<div class="sidebar-header">
<h4>
<i class="bi bi-shield-lock-fill"></i>
CoreWing
</h4>
</div>
<div class="sidebar-menu">
<ul class="nav flex-column">
<li class="nav-item">
<a :class="['nav-link', currentUrl === '/admin/dashboard' ? 'active' : '']"
href="#"
@click.prevent="changeMenu('/admin/dashboard')">
<i class="bi bi-speedometer2"></i>
仪表盘
</a>
</li>
<li class="nav-item" v-for="(item, index) in menus" :key="index">
<a :class="['nav-link', currentUrl === item.menuUrl ? 'active' : '']"
href="#"
@click.prevent="changeMenu(item.menuUrl)">
<i :class="item.menuIcon"></i>
{{ item.menuName }}
</a>
</li>
</ul>
</div>
<div class="sidebar-footer">
<button class="btn-logout" data-bs-toggle="modal" data-bs-target="#exitModal">
<i class="bi bi-box-arrow-right me-2"></i>
退出登录
</button>
</div>
</nav>
<!-- 主内容区 -->
<main class="main-content">
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<span class="navbar-brand">欢迎回来</span>
<div class="user-info" style="cursor: pointer">
<i class="bi bi-person-circle"></i>
<span>{{ userInfo.realName || userInfo.username }}</span>
</div>
</div>
</nav>
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- iframe容器 - 用于加载菜单对应的URL页面 -->
<iframe
v-if="currentUrl"
class="page-iframe"
:src="currentUrl"
@load="handleIframeLoad"
title="页面内容"
></iframe>
</div>
</main>
<div class="modal fade" id="exitModal" tabindex="-1" aria-labelledby="exitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">系统提示</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
您确认退出系统吗?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click="handleLogout">退出</button>
</div>
</div>
</div>
</div>
</div>
<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入封装的 axiosRequest.js -->
<script src="/assets/js/axiosRequest.js"></script>
<script>
const {createApp} = Vue;
createApp({
data() {
return {
userInfo: {
username: '',
realName: '',
userId: ''
},
menus: [],
currentUrl: '/admin/dashboard', // 当前加载的URL
isLoading: false // 加载状态
}
},
methods: {
async loadUserInfo() {
// 从 localStorage 获取用户信息
this.userInfo.username = localStorage.getItem('username') || '';
this.userInfo.realName = localStorage.getItem('realName') || '';
this.userInfo.userId = localStorage.getItem('userId') || '';
const token = localStorage.getItem("token");
if (token) {
try {
const response = await request.get('/sys/user/info');
if (response.code === 200) {
const user = response.data;
this.userInfo.username = user.username;
this.userInfo.realName = user.realName || user.username;
this.userInfo.userId = user.id;
}
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
},
async handleLogout() {
try {
await request.get('/sys/user/logout');
} catch (error) {
console.error('退出登录失败:', error);
} finally {
// 清除本地存储
localStorage.clear();
// 跳转到登录页
window.location.href = '/admin/login.html';
}
},
checkLogin() {
const token = localStorage.getItem('token');
if (!token) {
// 未登录,跳转到登录页
window.location.href = '/admin/login.html';
}
},
async initMenu() {
const response = await request.get('/sys/menu/initSysMenu');
if (response.code === 200) {
this.menus = response.data;
}
this.initCurrentUrlFromHash();
},
// 从浏览器hash初始化当前URL
initCurrentUrlFromHash() {
const hash = window.location.hash.slice(1); // 获取 # 后的内容(如 #/admin/user 取 /admin/user
// 如果hash存在且是有效菜单URL用hash否则用默认的仪表盘
const validMenuUrls = this.menus.map(item => item.menuUrl);
if (hash && (validMenuUrls.includes(hash) || hash === '/admin/dashboard')) {
this.currentUrl = hash;
} else {
this.currentUrl = '/admin/dashboard';
// 同步默认值到地址栏
window.location.hash = this.currentUrl;
}
},
// 切换菜单时更新URL和状态
changeMenu(menuUrl) {
this.currentUrl = menuUrl;
this.isLoading = true;
window.location.hash = menuUrl;
},
handleIframeLoad() {
console.log('加载完成');
this.isLoading = false;
}
},
mounted() {
// 检查登录状态
this.checkLogin();
// 加载系统菜单
this.initMenu();
// 加载用户信息
this.loadUserInfo();
this.isLoading = true;
// 监听浏览器hash变化刷新/前进后退时触发)
window.addEventListener('hashchange', () => {
this.initCurrentUrlFromHash();
});
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,669 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统设置</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<style>
body {
background-color: #f8f9fa;
color: #333;
font-size: 14px;
line-height: 1.5;
}
.main-container {
margin: 0 auto;
padding: 14px;
}
.settings-tabs {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.nav-tabs {
border-bottom: 1px solid #e9ecef;
background-color: #f8f9fa;
}
.nav-tabs .nav-item .nav-link {
color: #6c757d;
border: none;
padding: 12px 20px;
font-weight: 500;
border-radius: 0;
}
.nav-tabs .nav-item .nav-link.active {
color: #0d6efd;
background-color: #fff;
border-bottom: 3px solid #0d6efd;
}
.nav-tabs .nav-item .nav-link:hover {
color: #0d6efd;
background-color: rgba(13, 110, 253, 0.05);
}
.tab-content {
padding: 25px;
}
.settings-section {
margin-bottom: 30px;
}
.settings-section h3 {
font-size: 18px;
margin-bottom: 15px;
color: #212529;
padding-bottom: 8px;
border-bottom: 1px solid #e9ecef;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
color: #495057;
}
.form-text {
font-size: 13px;
color: #6c757d;
}
.settings-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #e9ecef;
}
.btn {
padding: 8px 20px;
font-size: 14px;
border-radius: 6px;
}
.switch-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.switch-label .form-text {
margin-bottom: 0;
}
.profile-picture {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.profile-picture img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e9ecef;
}
.upload-btn {
display: inline-flex;
align-items: center;
gap: 5px;
}
.language-selector, .theme-selector {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 10px;
}
.language-option, .theme-option {
display: flex;
align-items: center;
gap: 5px;
}
.alert-message {
position: fixed;
top: 20px;
right: 20px;
z-index: 1050;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.nav-tabs {
flex-wrap: wrap;
}
.profile-picture {
flex-direction: column;
align-items: flex-start;
}
.settings-actions {
flex-direction: column;
}
.settings-actions .btn {
width: 100%;
}
}
</style>
</head>
<body id="app">
<div class="main-container">
<!-- 设置选项卡 -->
<div class="settings-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#basic-settings" type="button" role="tab">
<i class="bi bi-person me-1"></i>基本设置
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#security-settings" type="button" role="tab">
<i class="bi bi-shield me-1"></i>安全设置
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#notification-settings" type="button" role="tab">
<i class="bi bi-bell me-1"></i>通知设置
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#system-preferences" type="button" role="tab">
<i class="bi bi-sliders me-1"></i>系统偏好
</button>
</li>
</ul>
<!-- 选项卡内容 -->
<div class="tab-content">
<!-- 基本设置 -->
<div class="tab-pane fade show active" id="basic-settings" role="tabpanel">
<div class="settings-section">
<h3><i class="bi bi-person-circle me-2"></i>个人资料</h3>
<div class="profile-picture">
<img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
<div>
<button class="btn btn-outline-primary upload-btn">
<i class="bi bi-upload"></i> 更换头像
</button>
<p class="form-text mt-2">支持 JPG、PNG 格式,建议尺寸 200x200px</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="fullname">姓名</label>
<input type="text" class="form-control" id="fullname" v-model="profile.fullname" placeholder="请输入您的姓名">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="username">用户名</label>
<input type="text" class="form-control" id="username" v-model="profile.username" placeholder="请输入用户名">
<div class="form-text">用户名用于登录,不可修改</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="email">电子邮箱</label>
<input type="email" class="form-control" id="email" v-model="profile.email" placeholder="请输入电子邮箱">
<div class="form-text">用于接收系统通知和密码重置</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="phone">手机号码</label>
<input type="tel" class="form-control" id="phone" v-model="profile.phone" placeholder="请输入手机号码">
</div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="bio">个人简介</label>
<textarea class="form-control" id="bio" v-model="profile.bio" rows="3" placeholder="请输入个人简介"></textarea>
</div>
</div>
<div class="settings-actions">
<button class="btn btn-secondary" @click="resetForm('basic')">取消</button>
<button class="btn btn-primary" @click="saveSettings('basic')">保存设置</button>
</div>
</div>
<!-- 安全设置 -->
<div class="tab-pane fade" id="security-settings" role="tabpanel">
<div class="settings-section">
<h3><i class="bi bi-lock me-2"></i>密码管理</h3>
<div class="form-group">
<label class="form-label" for="current-password">当前密码</label>
<input type="password" class="form-control" id="current-password" v-model="security.currentPassword" placeholder="请输入当前密码">
</div>
<div class="form-group">
<label class="form-label" for="new-password">新密码</label>
<input type="password" class="form-control" id="new-password" v-model="security.newPassword" placeholder="请输入新密码">
<div class="form-text">密码长度至少8位包含字母和数字</div>
</div>
<div class="form-group">
<label class="form-label" for="confirm-password">确认新密码</label>
<input type="password" class="form-control" id="confirm-password" v-model="security.confirmPassword" placeholder="请再次输入新密码">
</div>
</div>
<div class="settings-section">
<h3><i class="bi bi-shield-lock me-2"></i>登录安全</h3>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="security.twoFactorAuth">
启用两步验证
<span class="form-text">启用后,登录时需要额外验证,提高账号安全性</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="security.loginAlert">
登录提醒
<span class="form-text">异地登录或新设备登录时发送提醒</span>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">最近登录记录</label>
<table class="table table-sm">
<thead>
<tr>
<th>时间</th>
<th>IP地址</th>
<th>设备</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="log in loginLogs" :key="log.id">
<td>{{ log.time }}</td>
<td>{{ log.ip }}</td>
<td>{{ log.device }}</td>
<td><span class="badge bg-success">正常</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="settings-actions">
<button class="btn btn-secondary" @click="resetForm('security')">取消</button>
<button class="btn btn-primary" @click="saveSettings('security')">保存设置</button>
</div>
</div>
<!-- 通知设置 -->
<div class="tab-pane fade" id="notification-settings" role="tabpanel">
<div class="settings-section">
<h3><i class="bi bi-envelope me-2"></i>通知方式</h3>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.email">
邮件通知
<span class="form-text">通过电子邮件接收通知</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.sms">
短信通知
<span class="form-text">通过手机短信接收通知</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.inApp">
应用内通知
<span class="form-text">在系统内接收通知提醒</span>
</label>
</div>
</div>
</div>
<div class="settings-section">
<h3><i class="bi bi-bell-ring me-2"></i>通知类型</h3>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.types.system">
系统通知
<span class="form-text">接收系统更新、维护等重要通知</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.types.task">
任务通知
<span class="form-text">接收任务分配、截止提醒等通知</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.types.message">
消息通知
<span class="form-text">接收其他用户发送的消息通知</span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="notifications.types.marketing">
营销通知
<span class="form-text">接收产品推广、活动等营销信息</span>
</label>
</div>
</div>
</div>
<div class="settings-actions">
<button class="btn btn-secondary" @click="resetForm('notifications')">取消</button>
<button class="btn btn-primary" @click="saveSettings('notifications')">保存设置</button>
</div>
</div>
<!-- 系统偏好 -->
<div class="tab-pane fade" id="system-preferences" role="tabpanel">
<div class="settings-section">
<h3><i class="bi bi-globe me-2"></i>语言设置</h3>
<div class="form-group">
<label class="form-label">界面语言</label>
<div class="language-selector">
<div class="language-option">
<input class="form-check-input" type="radio" name="language" id="zh-CN" v-model="preferences.language" value="zh-CN">
<label class="form-check-label" for="zh-CN">简体中文</label>
</div>
<div class="language-option">
<input class="form-check-input" type="radio" name="language" id="en-US" v-model="preferences.language" value="en-US">
<label class="form-check-label" for="en-US">English (US)</label>
</div>
<div class="language-option">
<input class="form-check-input" type="radio" name="language" id="ja-JP" v-model="preferences.language" value="ja-JP">
<label class="form-check-label" for="ja-JP">日本語</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check form-switch">
<label class="switch-label">
<input class="form-check-input" type="checkbox" v-model="preferences.autoTranslate">
自动翻译
<span class="form-text">自动翻译系统内容为所选语言</span>
</label>
</div>
</div>
</div>
<div class="settings-section">
<h3><i class="bi bi-paint me-2"></i>主题设置</h3>
<div class="form-group">
<label class="form-label">界面主题</label>
<div class="theme-selector">
<div class="theme-option">
<input class="form-check-input" type="radio" name="theme" id="light-theme" v-model="preferences.theme" value="light">
<label class="form-check-label" for="light-theme">浅色主题</label>
</div>
<div class="theme-option">
<input class="form-check-input" type="radio" name="theme" id="dark-theme" v-model="preferences.theme" value="dark">
<label class="form-check-label" for="dark-theme">深色主题</label>
</div>
<div class="theme-option">
<input class="form-check-input" type="radio" name="theme" id="auto-theme" v-model="preferences.theme" value="auto">
<label class="form-check-label" for="auto-theme">跟随系统</label>
</div>
</div>
</div>
</div>
<div class="settings-section">
<h3><i class="bi bi-clock me-2"></i>时间与日期</h3>
<div class="form-group">
<label class="form-label" for="timezone">时区</label>
<select class="form-select" id="timezone" v-model="preferences.timezone">
<option value="Asia/Shanghai">Asia/Shanghai (GMT+8)</option>
<option value="UTC">UTC (GMT+0)</option>
<option value="America/New_York">America/New_York (GMT-5)</option>
<option value="Europe/London">Europe/London (GMT+0)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="date-format">日期格式</label>
<select class="form-select" id="date-format" v-model="preferences.dateFormat">
<option value="yyyy-MM-dd">2023-12-31</option>
<option value="dd/MM/yyyy">31/12/2023</option>
<option value="MM/dd/yyyy">12/31/2023</option>
</select>
</div>
</div>
<div class="settings-actions">
<button class="btn btn-secondary" @click="resetForm('preferences')">取消</button>
<button class="btn btn-primary" @click="saveSettings('preferences')">保存设置</button>
</div>
</div>
</div>
</div>
<!-- 成功提示框 -->
<div v-if="showSuccessAlert" class="alert-message">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>设置已保存!</strong> 您的更改已成功应用。
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="showSuccessAlert = false"></button>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="js/axiosRequest.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
// 个人资料设置
profile: {
fullname: '张三',
username: 'zhangsan',
email: 'zhangsan@example.com',
phone: '13800138000',
bio: '系统管理员,负责系统日常维护和管理工作'
},
// 安全设置
security: {
currentPassword: '',
newPassword: '',
confirmPassword: '',
twoFactorAuth: false,
loginAlert: true
},
// 通知设置
notifications: {
email: true,
sms: false,
inApp: true,
types: {
system: true,
task: true,
message: true,
marketing: false
}
},
// 系统偏好设置
preferences: {
language: 'zh-CN',
autoTranslate: false,
theme: 'light',
timezone: 'Asia/Shanghai',
dateFormat: 'yyyy-MM-dd'
},
// 登录日志
loginLogs: [
{ id: 1, time: '2023-11-01 09:30:25', ip: '192.168.1.1', device: 'Chrome / Windows 10' },
{ id: 2, time: '2023-10-29 15:45:12', ip: '192.168.1.1', device: 'Safari / macOS' },
{ id: 3, time: '2023-10-28 20:12:36', ip: '123.123.123.123', device: 'Mobile Safari / iOS' }
],
// 保存原始数据用于重置
originalData: {},
// 成功提示框显示状态
showSuccessAlert: false
}
},
computed: {
},
methods: {
// 保存设置
async saveSettings(type) {
// 模拟表单验证
if (type === 'security' && this.security.newPassword) {
if (this.security.newPassword !== this.security.confirmPassword) {
alert('新密码和确认密码不一致');
return;
}
if (this.security.newPassword.length < 8) {
alert('密码长度至少8位');
return;
}
}
// 模拟API请求保存设置
try {
const response = await request.post(`/system/settings/${type}`, this[type]);
if (response.code === 200) {
// 显示成功提示
this.showSuccessAlert = true;
// 3秒后自动关闭提示
setTimeout(() => {
this.showSuccessAlert = false;
}, 3000);
// 更新原始数据
this.originalData[type] = JSON.parse(JSON.stringify(this[type]));
}
} catch (error) {
console.error('保存设置失败:', error);
alert('保存设置失败,请重试');
}
},
// 重置表单
resetForm(type) {
if (this.originalData[type]) {
this[type] = JSON.parse(JSON.stringify(this.originalData[type]));
}
},
// 获取设置数据
async fetchData() {
try {
// 模拟获取设置数据
const response = await request.get('/system/settings');
if (response.code === 200) {
const data = response.data;
// 初始化设置数据
if (data.profile) this.profile = data.profile;
if (data.security) this.security = data.security;
if (data.notifications) this.notifications = data.notifications;
if (data.preferences) this.preferences = data.preferences;
// 保存原始数据用于重置
this.originalData = {
profile: JSON.parse(JSON.stringify(this.profile)),
security: JSON.parse(JSON.stringify(this.security)),
notifications: JSON.parse(JSON.stringify(this.notifications)),
preferences: JSON.parse(JSON.stringify(this.preferences))
};
}
} catch (error) {
console.error('获取设置数据失败:', error);
}
}
},
mounted() {
// 页面加载完成后初始化数据
this.fetchData();
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,467 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理系统</title>
<!-- 外部引入库文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- 外部引入自定义样式 -->
<link rel="stylesheet" href="/assets/css/table.css">
</head>
<body id="app">
<div class="main-container">
<div class="table-container">
<!-- 页面标题 -->
<h3 class="mb-4">用户管理</h3>
<!-- 多参数搜索栏 -->
<div class="search-bar">
<!-- 搜索参数1关键词 -->
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
用户名
</span>
<input
v-model="searchParams.keyword"
type="text"
class="form-control"
placeholder="关键词搜索(名称/ID"
@keyup.enter="fetchData()"
>
</div>
</div>
<!-- 搜索参数2状态筛选 -->
<div class="search-item">
<div class="input-group">
<span class="input-group-text">
状态
</span>
<select
v-model="searchParams.status"
class="form-select"
@change="fetchData()"
>
<option value="">全部状态</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
</div>
<!-- 搜索和重置按钮 -->
<div class="d-flex gap-2">
<button class="btn btn-primary" @click="fetchData()">
<i class="bi bi-search me-1"></i> 搜索
</button>
<button class="btn btn-success" @click="resetSearch()">
<i class="bi bi-arrow-counterclockwise me-1"></i> 重置
</button>
</div>
</div>
<!-- 新增按钮 -->
<div class="mb-3">
<button class="btn btn-info" @click="openAddModal()">
<i class="bi bi-plus-circle me-1"></i> 新增
</button>
</div>
<!-- 表格 -->
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead class="table-light">
<tr>
<!-- 全选复选框 -->
<th style="width: 50px;">
<input
type="checkbox"
class="form-check-input"
v-model="selectAll"
@change="toggleSelectAll()"
>
</th>
<th>ID</th>
<th>名称</th>
<th>状态</th>
<th>用户类型</th>
<th>所属部门</th>
<th>创建时间</th>
<th style="width: 120px;">操作</th>
</tr>
</thead>
<tbody>
<!-- 加载中状态 -->
<tr v-if="loading">
<td colspan="8" class="p-0">
<div class="loading-container">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">加载中,请稍候...</p>
</div>
</td>
</tr>
<!-- 无数据状态 -->
<tr v-else-if="tableData.length === 0">
<td colspan="8" class="p-0">
<div class="no-data">
<i class="bi bi-folder-x"></i>
<h5>暂无匹配数据</h5>
<p class="text-muted">请尝试调整搜索条件或重置查询</p>
</div>
</td>
</tr>
<!-- 数据列表 -->
<tr v-else v-for="(item, index) in tableData" :key="item.id" :class="{ selected: selectedIds.includes(item.id) }">
<td>
<input
type="checkbox"
class="form-check-input"
v-model="selectedIds"
:value="item.id"
@change="toggleSelectItem(item.id)"
>
</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<span class="badge" :class="item.status === 1 ? 'bg-success' : 'bg-danger'">
{{ item.status === 1 ? '启用' : '禁用' }}
</span>
</td>
<td>
<span class="badge bg-primary">
{{ item.userType === 'admin' ? '管理员' : item.userType === 'editor' ? '编辑' : '查看者' }}
</span>
</td>
<td>
<span class="badge bg-secondary">
{{ item.deptId === '1' ? '技术部' : item.deptId === '2' ? '运营部' : item.deptId === '3' ? '市场部' : '人事部' }}
</span>
</td>
<td>{{ formatTime(item.createTime) }}</td>
<td>
<div class="d-flex gap-1">
<button class="btn btn-sm btn-primary" @click="openEditModal(item)">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger" @click="handleDelete(item.id)">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 批量操作(表格下方左侧) -->
<div class="batch-actions mt-3">
<div class="d-flex align-items-center gap-2">
<span class="text-muted">已选中 {{ selectedIds.length }} 条数据</span>
<!-- 使用select标签实现批量操作选择 -->
<select
class="form-select"
v-model="batchAction"
:disabled="selectedIds.length === 0"
@change="handleBatchOperation"
style="width: auto; min-width: 160px;"
>
<option value="">-- 批量操作 --</option>
<option value="delete">批量删除</option>
<option value="enable">批量启用</option>
<option value="disable">批量禁用</option>
</select>
<button
class="btn btn-secondary"
@click="clearSelected()"
:disabled="selectedIds.length === 0"
>
<i class="bi bi-x-circle me-1"></i> 取消选择
</button>
</div>
</div>
<!-- 分页控件 -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="page-info">
共 {{ total }} 条数据,当前第 {{ pageNum }}/{{ totalPages }} 页
</div>
<nav>
<ul class="pagination pagination-sm mb-0">
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === 1 }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum - 1)">上一页</a>
</li>
<li class="page-item active" v-for="page in pageList" :key="page">
<a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(pageNum + 1)">下一页</a>
</li>
<li class="page-item" :class="{ disabled: pageNum === totalPages }">
<a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- 外部引入库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 外部引入模拟请求文件 -->
<script src="/assets/js/axiosRequest.js"></script>
<!-- 页面核心逻辑 -->
<script>
const {createApp} = Vue;
createApp({
data() {
return {
tableData: [], // 表格数据源
loading: false, // 加载状态
// 多搜索参数绑定(与搜索栏对应)
searchParams: {
userName: '',
},
// 分页参数
pageNum: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
totalPages: 0, // 总页数
// 批量操作
selectedIds: [], // 选中的ID集合
selectAll: false, // 全选状态
batchAction: '', // 批量操作选择
// 分页显示范围最多显示5个页码
pageRange: 5
}
},
computed: {
// 计算当前显示的页码列表
pageList() {
const list = [];
if (this.totalPages === 0) return list;
// 总页数小于等于显示范围,直接显示所有页码
if (this.totalPages <= this.pageRange) {
for (let i = 1; i <= this.totalPages; i++) {
list.push(i);
}
} else {
// 总页数大于显示范围显示当前页前后2个页码
let start = Math.max(1, this.pageNum - 2);
let end = Math.min(this.totalPages, this.pageNum + 2);
// 确保显示5个页码
if (end - start < this.pageRange - 1) {
if (start === 1) {
end = this.pageRange;
} else if (end === this.totalPages) {
start = this.totalPages - this.pageRange + 1;
}
}
for (let i = start; i <= end; i++) {
list.push(i);
}
}
return list;
}
},
methods: {
// 格式化时间(毫秒转字符串)
formatTime(time) {
if (!time) return '-';
const date = new Date(time);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
// 获取表格数据(核心方法)
async fetchData() {
this.loading = true;
try {
// 调用模拟接口获取数据
const response = await request.get('/sys/user/page', {
...this.searchParams, // 传递所有搜索参数
current: this.pageNum,
size: this.pageSize
});
if (response.code === 200) {
this.tableData = response.data; // 列表数据
this.total = response.data.total; // 总条数
this.totalPages = Math.ceil(this.total / this.pageSize); // 总页数
}
} catch (error) {
console.error('获取数据失败:', error);
this.tableData = [];
this.total = 0;
this.totalPages = 0;
} finally {
this.loading = false;
this.clearSelected(); // 每次加载数据清空选中状态
}
},
// 切换页码
changePage(page) {
// 边界判断
if (page < 1 || page > this.totalPages || page === this.pageNum) return;
this.pageNum = page;
this.fetchData(); // 切换页码后重新加载数据
},
// 重置搜索
resetSearch() {
// 重置所有搜索参数
this.searchParams = {
keyword: '',
status: '',
createTimeStart: '',
createTimeEnd: '',
userType: '',
deptId: ''
};
this.pageNum = 1; // 重置到第一页
this.fetchData();
},
// 全选/取消全选
toggleSelectAll() {
if (this.selectAll) {
// 全选收集所有数据的ID
this.selectedIds = this.tableData.map(item => item.id);
} else {
// 取消全选清空选中ID
this.selectedIds = [];
}
},
// 单个选中/取消选中
toggleSelectItem(id) {
// 当选中状态变化时,更新全选状态
this.selectAll = this.selectedIds.length === this.tableData.length && this.tableData.length > 0;
},
// 清空选中状态
clearSelected() {
this.selectedIds = [];
this.selectAll = false;
this.batchAction = ''; // 重置批量操作选择
},
// 处理批量操作
handleBatchOperation() {
if (!this.batchAction || this.selectedIds.length === 0) return;
switch (this.batchAction) {
case 'delete':
this.handleBatchDelete();
break;
case 'enable':
this.handleBatchStatus(1);
break;
case 'disable':
this.handleBatchStatus(0);
break;
}
// 执行操作后重置选择
this.batchAction = '';
},
// 批量删除
async handleBatchDelete() {
if (!confirm(`确定要删除选中的 ${this.selectedIds.length} 条数据吗?`)) return;
try {
const response = await request.post('/sys/data/batchDelete', {
ids: this.selectedIds
});
if (response.code === 200) {
alert('删除成功!');
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('批量删除失败:', error);
alert('删除失败,请重试!');
}
},
// 批量修改状态(启用/禁用)
async handleBatchStatus(status) {
try {
const response = await request.post('/sys/data/batchUpdateStatus', {
ids: this.selectedIds,
status: status
});
if (response.code === 200) {
alert(`${status === 1 ? '启用' : '禁用'}选中数据!`);
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('批量更新状态失败:', error);
alert('操作失败,请重试!');
}
},
// 单个删除
async handleDelete(id) {
if (!confirm('确定要删除这条数据吗?')) return;
try {
const response = await request.post('/sys/data/delete', {id});
if (response.code === 200) {
alert('删除成功!');
this.fetchData(); // 重新加载数据
}
} catch (error) {
console.error('删除失败:', error);
alert('删除失败,请重试!');
}
},
// 打开新增模态框
openAddModal() {
alert('打开新增模态框');
// 实际项目中添加模态框显示逻辑
},
// 打开编辑模态框
openEditModal(item) {
alert(`打开编辑模态框编辑ID: ${item.id}`);
// 实际项目中添加模态框显示和数据回显逻辑
}
},
mounted() {
// 页面加载完成后初始化数据
this.fetchData();
}
}).mount('#app');
</script>
</body>
</html>

View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>隐私政策</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义样式 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#6B7280',
light: '#F3F4F6',
dark: '#1F2937'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-balance {
text-wrap: balance;
}
.transition-height {
transition: max-height 0.3s ease-out;
}
}
</style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<!-- 顶部导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-center items-center">
<h1 class="text-xl font-semibold text-dark">隐私政策</h1>
<!-- <button class="text-primary hover:text-primary/80 transition-colors">-->
<!-- <i class="fa fa-arrow-left text-lg"></i>-->
<!-- </button>-->
</div>
</header>
<!-- 主要内容区 -->
<main class="container mx-auto px-4 py-6">
<!-- 政策更新信息 -->
<div class="bg-primary/10 border-l-4 border-primary p-4 rounded-r mb-6">
<p class="text-sm text-primary">
<i class="fa fa-info-circle mr-2"></i>
最后更新日期:<span th:text="${lastUpdateTime}"></span>
</p>
</div>
<!-- 隐私政策列表 -->
<div class="space-y-1">
<!-- 使用Thymeleaf循环渲染列表项 -->
<div th:each="item: ${list}" class="bg-white rounded-lg shadow-sm overflow-hidden mb-3 transform hover:shadow-md transition-shadow">
<!-- 列表项标题 -->
<div class="flex justify-between items-center p-4 cursor-pointer policy-toggle">
<h2 class="text-base font-medium text-dark" th:text="${item.title}"></h2>
<i class="fa fa-chevron-down text-secondary transition-transform duration-300"></i>
</div>
<!-- 列表项内容 -->
<div class="policy-content max-h-0 overflow-hidden transition-height">
<div class="px-4 pb-4 text-sm text-secondary leading-relaxed text-balance">
<p th:utext="${item.content}">
这里将显示隐私政策的详细内容,包括我们如何收集、使用、存储和保护您的个人信息,以及您拥有的相关权利和选择。
</p>
</div>
</div>
</div>
<!-- 示例默认项实际使用时由Thymeleaf数据替换 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-3 transform hover:shadow-md transition-shadow">
<div class="flex justify-between items-center p-4 cursor-pointer policy-toggle">
<h2 class="text-base font-medium text-dark">信息收集与使用</h2>
<i class="fa fa-chevron-down text-secondary transition-transform duration-300"></i>
</div>
<div class="policy-content max-h-0 overflow-hidden transition-height">
<div class="px-4 pb-4 text-sm text-secondary leading-relaxed text-balance">
<p>我们收集您在使用服务过程中提供的个人信息,包括但不限于姓名、联系方式、位置信息等。这些信息将用于提供、维护和改进我们的服务,开发新功能,并保护我们的用户和服务。</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-3 transform hover:shadow-md transition-shadow">
<div class="flex justify-between items-center p-4 cursor-pointer policy-toggle">
<h2 class="text-base font-medium text-dark">信息共享与披露</h2>
<i class="fa fa-chevron-down text-secondary transition-transform duration-300"></i>
</div>
<div class="policy-content max-h-0 overflow-hidden transition-height">
<div class="px-4 pb-4 text-sm text-secondary leading-relaxed text-balance">
<p>我们不会向第三方出售您的个人信息。在以下情况下,我们可能会共享您的信息:获得您的明确同意;为提供您要求的产品或服务;遵守适用的法律法规、法律程序或政府要求;保护我们的权利、财产或安全,以及我们的用户和公众的权利。</p>
</div>
</div>
</div>
</div>
<!-- 底部提示 -->
<div class="mt-8 text-center text-xs text-secondary">
<p>如有任何疑问,请联系我们的客服团队</p>
<p class="mt-1">service@example.com</p>
</div>
</main>
<script>
// 处理折叠/展开功能
document.addEventListener('DOMContentLoaded', function() {
const toggles = document.querySelectorAll('.policy-toggle');
toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
const content = this.nextElementSibling;
const icon = this.querySelector('i');
// 切换内容显示状态
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
});
});
// 默认展开第一项
if (toggles.length > 0) {
toggles[0].click();
}
});
</script>
</body>
</html>

View File

@@ -5,6 +5,6 @@
<title th:text="${tutorial?.tutorialTitle}"></title>
</head>
<body>
<div th:utext="${tutorial.content}"></div>
</body>
</html>