FT546MWS/ruoyi-license/CHANGES.md

# 授权码模块集成改动说明

> 本文档记录引入 `ruoyi-license` 授权码模块时，对原有项目文件的所有改动（不含 `ruoyi-license` 模块本身及 `SysLicenseController`）。

---

## 1. 根模块 `pom.xml`

**文件路径：** `wms/pom.xml`

**改动内容：**

1. `<modules>` 中注册 `ruoyi-license` 子模块：

```xml
<modules>
    <module>ruoyi-admin</module>
    <module>ruoyi-framework</module>
    <module>ruoyi-system</module>
    <module>ruoyi-quartz</module>
    <module>ruoyi-generator</module>
    <module>ruoyi-common</module>
    <module>ruoyi-license</module>  <!-- 新增 -->
</modules>
```

2. `<dependencyManagement>` 中声明 `ruoyi-license` 依赖版本：

```xml
<!-- 授权码模块 -->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-license</artifactId>
    <version>${ruoyi.version}</version>
</dependency>
```

---

## 2. `ruoyi-admin/pom.xml`

**文件路径：** `wms/ruoyi-admin/pom.xml`

**改动内容：**

引入 `ruoyi-license` 依赖，使授权拦截器和配置能被 Spring Boot 扫描加载：

```xml
<!-- 授权码模块 -->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-license</artifactId>
</dependency>
```

---

## 3. `SecurityConfig.java`

**文件路径：** `wms/ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java`

**改动内容：**

在 Spring Security 匿名白名单中加入 `/system/license/active`，允许未登录用户调用激活授权码接口：

```java
// 改动前
requests.antMatchers("/login", "/register", "/captchaImage").permitAll()

// 改动后
requests.antMatchers("/login", "/register", "/captchaImage", "/system/license/active").permitAll()
```

---

## 4. 前端 `api/license.js`（新建）

**文件路径：** `wms/ui/src/api/license.js`

**改动内容：**

新建文件，封装授权码相关接口：

```js
import request from '@/utils/request'

// 激活授权码（无需登录）
export function activeLicense(licenseCode) {
  return request({
    url: '/system/license/active',
    method: 'post',
    params: { licenseCode }
  })
}

// 查询当前授权信息（需登录）
export function getLicenseInfo() {
  return request({
    url: '/system/license/info',
    method: 'get'
  })
}
```

---

## 5. 登录页 `login.vue`

**文件路径：** `wms/ui/src/views/login.vue`

**改动内容：**

### 5.1 模板部分

在登录按钮下方新增"激活授权码"按钮，以及激活弹窗：

```html
<!-- 激活授权码按钮 -->
<el-form-item style="width:100%;">
  <el-button
    size="medium"
    type="warning"
    style="width:100%;"
    @click.native.prevent="openLicenseDialog"
  >激活授权码</el-button>
</el-form-item>

<!-- 激活授权码弹窗 -->
<el-dialog title="激活授权码" :visible.sync="licenseDialogVisible" width="420px" append-to-body>
  <el-input v-model="licenseCode" type="textarea" :rows="4" placeholder="请输入授权码" />
  <span slot="footer">
    <el-button @click="licenseDialogVisible = false">取 消</el-button>
    <el-button type="primary" :loading="licenseLoading" @click="handleActiveLicense">激 活</el-button>
  </span>
</el-dialog>
```

### 5.2 Script 部分

新增 import、data 字段和方法：

```js
// 新增 import
import { activeLicense } from "@/api/license"

// 新增 data 字段
licenseDialogVisible: false,
licenseCode: '',
licenseLoading: false

// 新增方法
openLicenseDialog() {
  this.licenseCode = ''
  this.licenseDialogVisible = true
},
handleActiveLicense() {
  if (!this.licenseCode.trim()) {
    this.$message.warning('请输入授权码')
    return
  }
  this.licenseLoading = true
  activeLicense(this.licenseCode.trim()).then(res => {
    if (res.code === 200) {
      this.$message.success(res.msg || '授权码激活成功')
      this.licenseDialogVisible = false
    } else {
      this.$message.error(res.msg || '授权码激活失败')
    }
  }).catch(() => {
    this.$message.error('授权码激活失败')
  }).finally(() => {
    this.licenseLoading = false
  })
}
```

---

## 6. 顶部导航栏 `Navbar.vue`

**文件路径：** `wms/ui/src/layout/components/Navbar.vue`

**改动内容：**

### 6.1 模板部分

在 navbar 中间插入授权到期警告条（剩余不足 30 天时显示）：

```html
<div v-if="licenseWarning" class="license-warning">
  <i class="el-icon-warning-outline" />
  系统授权将于 {{ licenseExpireText }} 后过期，请及时联系管理员续期
</div>
```

### 6.2 Script 部分

```js
// 新增 import
import { getLicenseInfo } from '@/api/license'

// 新增 data 字段
licenseWarning: false,
licenseExpireText: '',
licenseTimer: null

// 新增生命周期钩子
mounted() {
  this.checkLicenseExpire()
  this.licenseTimer = setInterval(() => this.checkLicenseExpire(), 60 * 1000)
},
beforeDestroy() {
  if (this.licenseTimer) clearInterval(this.licenseTimer)
},

// 新增方法
checkLicenseExpire() {
  getLicenseInfo().then(res => {
    if (res.code === 200 && res.data && res.data.expireTime) {
      const expireTime = new Date(res.data.expireTime).getTime()
      const now = Date.now()
      const diffMs = expireTime - now
      const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
      if (diffMs > 0 && diffDays <= 30) {
        this.licenseWarning = true
        if (diffMs < 1000 * 60 * 60 * 24) {
          const hours = Math.floor(diffMs / (1000 * 60 * 60))
          const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
          this.licenseExpireText = hours > 0 ? `${hours} 小时 ${minutes} 分钟` : `${minutes} 分钟`
        } else if (diffDays < 7) {
          this.licenseExpireText = diffDays + ' 天'
        } else {
          this.licenseExpireText = Math.ceil(diffDays / 7) + ' 周'
        }
      }
    }
  }).catch(() => {})
}
```

### 6.3 样式部分

```scss
.license-warning {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  color: #e6a23c;
  font-weight: 500;
  pointer-events: none;
  i { margin-right: 4px; }
}
```

---

## 改动文件汇总

| 文件 | 类型 | 说明 |
|---|---|---|
| `wms/pom.xml` | 修改 | 注册模块 + 声明依赖版本 |
| `wms/ruoyi-admin/pom.xml` | 修改 | 引入 ruoyi-license 依赖 |
| `ruoyi-framework/.../SecurityConfig.java` | 修改 | 白名单加入激活授权码接口 |
| `ui/src/api/license.js` | 新建 | 封装激活和查询授权信息接口 |
| `ui/src/views/login.vue` | 修改 | 新增激活授权码按钮和弹窗 |
| `ui/src/layout/components/Navbar.vue` | 修改 | 新增授权到期倒计时警告条 |