# SysApp（第三方应用集成）管理界面实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers-subagent-driven-development (recommended) or superpowers-executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在 admin-ui 后台实现 SysApp（第三方应用集成）管理模块，提供对微信/支付宝/Stripe 等第三方平台应用凭证信息的统一管理能力。

**Architecture:** 完全照搬现有 `oauth2-client` 模块的 CRUD 模式 —— `BaseService` 13 行极简继承 + `RuiTable` 列表页 + `FormDialog` 弹窗（el-tabs 4 Tab）。**不引入新依赖**。

**Tech Stack:** Vue 3, TypeScript, Element Plus, Vite, Pinia

---

## 文件变更清单

| # | 文件 | 变更类型 | 说明 |
|---|------|---------|------|
| 1 | `admin-ui/src/service/system/sysAppService.ts` | 新建 | Service（继承 BaseService） |
| 2 | `admin-ui/src/service/system/index.ts` | 修改 | 追加导出 sysAppService |
| 3 | `admin-ui/src/locales/zh-CN.ts` | 修改 | 加 `systemApp: '应用集成'` |
| 4 | `admin-ui/src/locales/en-US.ts` | 修改 | 加 `systemApp: 'App Integration'` |
| 5 | `admin-ui/src/router/modules/system.ts` | 修改 | 注册 `/system/app` 路由 |
| 6 | `admin-ui/src/views/system/app/Index.vue` | 新建 | 列表页（RuiTable） |
| 7 | `admin-ui/src/views/system/app/SysAppFormDialog.vue` | 新建 | 表单弹窗（4 Tab） |

**合计：新建 3 个文件 + 修改 4 个文件 = 7 个文件**

---

## 任务依赖图

```
Task 1 (Service) ──┬── Task 2 (Service Index)
                   │
                   ├── Task 5 (列表页) ──┐
                   │                     │
                   └── Task 6 (表单) ────┴── Task 7 (端到端验证)

Task 3 (i18n) ──┐
Task 4 (Router) ┴── Task 5 (列表页)
```

---

## Task 1: 创建 SysApp Service ✅

**Files:**
- Create: `admin-ui/src/service/system/sysAppService.ts` ✅

- [x] **Step 1: 写入 Service 文件**

在 `admin-ui/src/service/system/sysAppService.ts` 创建：

```typescript
import { BaseService } from '../BaseService'

/**
 * SysApp（第三方应用集成）服务
 *
 * <p>负责与后端 /system/admin/app 接口的通信，继承 BaseService 获得标准 CRUD 能力。</p>
 *
 * <p><b>后续升级路径</b>：后端文件上传接口（rui/rui-framework#4）就绪后，可在此文件追加
 * `uploadCertificate(file: File)` 方法，并将表单中 certificates 字段从 JSON textarea
 * 升级为文件上传组件。</p>
 */
class SysAppService extends BaseService {
  constructor() {
    super('/system/admin/app')
  }
}

/** SysApp 服务单例 */
export const sysAppService = new SysAppService()
```

- [ ] **Step 2: 验证类型检查**

Run:
```bash
cd admin-ui && npx vue-tsc --noEmit --skipLibCheck src/service/system/sysAppService.ts
```
Expected: 无错误输出 ✅

- [x] **Step 3: Commit** (commit `67d6686`)

```bash
git add admin-ui/src/service/system/sysAppService.ts
git commit -m "feat(sysApp): add sysAppService extending BaseService for /system/admin/app"
```

---

## Task 2: 在 Service 统一入口导出 sysAppService ✅

**Files:**
- Modify: `admin-ui/src/service/system/index.ts` ✅

- [x] **Step 1: 追加导出语句** (commit `0b4b02f`)

在文件末尾追加：

```typescript
export { sysAppService } from './sysAppService'
```

- [ ] **Step 2: 验证导入**

Run:
```bash
cd admin-ui && npx vue-tsc --noEmit --skipLibCheck src/service/system/index.ts
```
Expected: 无错误输出

- [ ] **Step 3: Commit**

```bash
git add admin-ui/src/service/system/index.ts
git commit -m "feat(sysApp): export sysAppService from system service index"
```

---

## Task 3: 配置国际化（中英文） ✅

**Files:**
- Modify: `admin-ui/src/locales/zh-CN.ts` ✅
- Modify: `admin-ui/src/locales/en-US.ts` ✅

- [x] **Step 1: 在 zh-CN.ts 添加中文** (commit `98741a0`)

定位到 `systemOAuth2Client: 'OAuth2客户端',` 这一行，在其后添加：

```typescript
    systemApp: '应用集成',
```

（注意缩进：与 systemOAuth2Client 保持一致的 4 空格）

- [ ] **Step 2: 在 en-US.ts 添加英文**

定位到 `systemOAuth2Client: 'OAuth2 Client',`（或对应位置），在其后添加：

```typescript
    systemApp: 'App Integration',
```

（如果 en-US.ts 没有 systemOAuth2Client 这一行，则加在 system 块的合理位置，参考 systemOAuth2Client 的就近位置）

- [ ] **Step 3: 验证**

Run:
```bash
grep -n "systemApp" admin-ui/src/locales/zh-CN.ts admin-ui/src/locales/en-US.ts
```
Expected: 两个文件各有一行匹配

- [ ] **Step 4: Commit**

```bash
git add admin-ui/src/locales/zh-CN.ts admin-ui/src/locales/en-US.ts
git commit -m "feat(sysApp): add systemApp i18n key (zh-CN: '应用集成', en-US: 'App Integration')"
```

---

## Task 4: 注册路由 ✅

**Files:**
- Modify: `admin-ui/src/router/modules/system.ts` ✅

- [x] **Step 1: 在 M 常量加键** (commit `e961bc5`)

定位到 `systemOAuth2Client: 'menu.systemOAuth2Client',` 这一行，在其后添加：

```typescript
  systemApp: 'menu.systemApp',
```

- [ ] **Step 2: 在 systemRoutes 数组加路由**

定位到 `system/oauth2-client` 路由条目，在其后添加：

```typescript
  { path: 'system/app', name: 'SystemApp', component: () => import('@/views/system/app/Index.vue'), meta: { i18n: M.systemApp } },
```

- [ ] **Step 3: 验证**

Run:
```bash
grep -n "systemApp\|system/app" admin-ui/src/router/modules/system.ts
```
Expected: 至少 2 行匹配（一个 M 常量，一个 systemRoutes 数组）

- [ ] **Step 4: Commit**

```bash
git add admin-ui/src/router/modules/system.ts
git commit -m "feat(sysApp): register /system/app route in system router"
```

---

## Task 5: 创建列表页

**Files:**
- Create: `admin-ui/src/views/system/app/Index.vue`

> **依赖**：Task 1（Service）、Task 3（i18n）、Task 4（Router）必须先完成。

- [ ] **Step 1: 创建目录**

```bash
mkdir -p admin-ui/src/views/system/app
```

- [ ] **Step 2: 写入列表页**

创建 `admin-ui/src/views/system/app/Index.vue`，内容如下：

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { sysAppService } from '@/service/system/sysAppService'
import type { TableColumn, PageResult, PageParams } from '@/components/RuiTable'
import SysAppFormDialog from './SysAppFormDialog.vue'

/**
 * 查询参数
 */
const query = ref({
  name: '',
  platform: '',
  ownerType: '',
  status: '',
})

/**
 * 平台枚举
 */
const platformMap: Record<string, { label: string; type: 'success' | 'primary' | 'warning' }> = {
  wechat: { label: '微信', type: 'success' },
  alipay: { label: '支付宝', type: 'primary' },
  stripe: { label: 'Stripe', type: 'warning' },
}

/**
 * 所有者类型枚举
 */
const ownerTypeMap: Record<string, { label: string; type: 'primary' | 'success' }> = {
  PLATFORM: { label: '平台级', type: 'primary' },
  TENANT: { label: '租户级', type: 'success' },
}

/**
 * 表格列配置
 */
const columns: TableColumn[] = [
  { prop: 'name', label: '应用名称', minWidth: 150 },
  {
    prop: 'platform',
    label: '平台',
    width: 100,
    align: 'center',
    slot: true,
  },
  {
    prop: 'ownerType',
    label: '所有者',
    width: 100,
    align: 'center',
    slot: true,
  },
  { prop: 'appId', label: '应用ID', minWidth: 120 },
  {
    prop: 'status',
    label: '状态',
    width: 90,
    align: 'center',
    slot: true,
  },
  {
    prop: 'createdAt',
    label: '创建时间',
    minWidth: 180,
    sortable: 'custom',
    dataType: 'dateTime',
  },
]

/**
 * 加载数据
 */
async function loadData(params: PageParams & Record<string, any>): Promise<PageResult> {
  return sysAppService.page(params)
}

/**
 * 表格组件引用
 */
const tableRef = ref<InstanceType<typeof import('@/components/RuiTable').default>>()

/**
 * 弹窗显示状态
 */
const dialogVisible = ref(false)
const currentRow = ref<any>(null)

/**
 * 新增
 */
function handleAdd() {
  currentRow.value = null
  dialogVisible.value = true
}

/**
 * 编辑
 */
function handleEdit(row: any) {
  currentRow.value = row
  dialogVisible.value = true
}

/**
 * 删除
 */
function handleDelete(row: any) {
  ElMessageBox.confirm(`确认删除应用 "${row.name}" 吗？`, '提示', {
    type: 'warning',
  }).then(async () => {
    try {
      await sysAppService.remove(row.id)
      ElMessage.success('删除成功')
      tableRef.value?.refresh()
    } catch {
      // 错误已由请求拦截器统一提示
    }
  }).catch(() => {})
}

/**
 * 状态切换
 */
async function handleStatusChange(row: any, status: number) {
  if (!row?.id) return
  try {
    await sysAppService.changeStatus(row.id, status)
    ElMessage.success(status === 1 ? '启用成功' : '禁用成功')
  } catch {
    row.status = status === 1 ? 0 : 1
  }
}

/**
 * 表单操作成功回调
 */
function handleFormSuccess() {
  tableRef.value?.refresh()
}
</script>

<template>
  <div>
    <h2 class="text-xl font-bold mb-4">
      {{ $t('menu.systemApp') }}
    </h2>

    <RuiTable
      ref="tableRef"
      :columns="columns"
      :load-data="loadData"
      :show-selection="true"
      :exportable="true"
      export-filename="SysApp应用集成列表"
    >
      <!-- 查询区域 -->
      <template #search="{ query: q, search, reset }">
        <el-form-item label="应用名称">
          <el-input v-model.trim="q.name" placeholder="请输入应用名称" clearable @keyup.enter="search" />
        </el-form-item>
        <el-form-item label="平台">
          <el-select v-model="q.platform" placeholder="全部" clearable style="width: 120px">
            <el-option v-for="(v, k) in platformMap" :key="k" :label="v.label" :value="k" />
          </el-select>
        </el-form-item>
        <el-form-item label="所有者">
          <el-select v-model="q.ownerType" placeholder="全部" clearable style="width: 120px">
            <el-option v-for="(v, k) in ownerTypeMap" :key="k" :label="v.label" :value="k" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="q.status" placeholder="全部" clearable style="width: 100px">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            查询
          </el-button>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </template>

      <!-- 工具栏左侧 -->
      <template #toolbar-left>
        <el-button type="primary" @click="handleAdd">
          新增应用
        </el-button>
      </template>

      <!-- 自定义列：平台 -->
      <template #column-platform="{ row }">
        <el-tag v-if="platformMap[row.platform]" :type="platformMap[row.platform].type" size="small">
          {{ platformMap[row.platform].label }}
        </el-tag>
        <span v-else>-</span>
      </template>

      <!-- 自定义列：所有者 -->
      <template #column-ownerType="{ row }">
        <el-tag v-if="ownerTypeMap[row.ownerType]" :type="ownerTypeMap[row.ownerType].type" size="small">
          {{ ownerTypeMap[row.ownerType].label }}
        </el-tag>
        <span v-else>-</span>
      </template>

      <!-- 自定义列：状态 -->
      <template #column-status="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="(val: number) => handleStatusChange(row, val)"
        />
      </template>

      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button link type="primary" size="small" @click="handleEdit(row)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </RuiTable>

    <!-- 新增/编辑弹窗 -->
    <SysAppFormDialog
      v-model:visible="dialogVisible"
      :row="currentRow"
      @success="handleFormSuccess"
    />
  </div>
</template>
```

- [ ] **Step 3: 验证类型检查**

Run:
```bash
cd admin-ui && npx vue-tsc --noEmit --skipLibCheck
```
Expected: 无错误输出

- [ ] **Step 4: Commit**

```bash
git add admin-ui/src/views/system/app/Index.vue
git commit -m "feat(sysApp): add SysApp list page with RuiTable, search, status switch"
```

---

## Task 6: 创建表单弹窗

**Files:**
- Create: `admin-ui/src/views/system/app/SysAppFormDialog.vue`

> **依赖**：Task 1（Service）必须先完成。

- [ ] **Step 1: 写入表单弹窗**

创建 `admin-ui/src/views/system/app/SysAppFormDialog.vue`，内容如下：

```vue
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { sysAppService } from '@/service/system/sysAppService'

const props = defineProps<{
  visible: boolean
  row: any
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
})

/**
 * 平台选项
 */
const platformOptions = [
  { label: '微信', value: 'wechat' },
  { label: '支付宝', value: 'alipay' },
  { label: 'Stripe', value: 'stripe' },
]

/**
 * 所有者选项
 */
const ownerTypeOptions = [
  { label: '平台级', value: 'PLATFORM' },
  { label: '租户级', value: 'TENANT' },
]

/**
 * 签名方式选项
 */
const signTypeOptions = [
  { label: 'RSA2', value: 'RSA2' },
  { label: 'MD5', value: 'MD5' },
  { label: 'HMAC', value: 'HMAC' },
]

/**
 * 表单默认值
 */
const defaultForm = {
  id: undefined as number | undefined,
  ownerType: 'PLATFORM',
  platform: 'wechat',
  name: '',
  appId: '',
  appSecret: '',
  appKey: '',
  certificates: '',
  aesKey: '',
  redirectUri: '',
  merchantId: '',
  signType: 'RSA2',
  notifyUrl: '',
  apiBase: '',
  isSandbox: 0,
  extra: '',
  status: 1,
  description: '',
  sortNo: 0,
}

const form = ref({ ...defaultForm })
const formRef = ref()

/**
 * 校验规则
 */
const rules = {
  name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
  ownerType: [{ required: true, message: '请选择所有者类型', trigger: 'change' }],
  platform: [{ required: true, message: '请选择平台', trigger: 'change' }],
}

const loading = ref(false)

/**
 * 校验 JSON 字段
 */
function validateJSON(value: string, fieldName: string): boolean {
  if (!value || !value.trim()) return true
  try {
    JSON.parse(value)
    return true
  } catch {
    ElMessage.error(`${fieldName} JSON 格式错误`)
    return false
  }
}

/**
 * 提交表单
 */
async function handleSubmit() {
  await formRef.value.validate()
  if (!validateJSON(form.value.certificates, 'certificates')) return
  if (!validateJSON(form.value.extra, 'extra')) return

  loading.value = true
  try {
    const isEdit = !!form.value.id
    const success = isEdit
      ? await sysAppService.update(form.value as any)
      : await sysAppService.add(form.value)
    if (success !== false) {
      ElMessage.success(isEdit ? '修改成功' : '新增成功')
      emit('success')
      dialogVisible.value = false
    }
  } catch {
    // 错误已由请求拦截器统一提示
  } finally {
    loading.value = false
  }
}

/**
 * 监听弹窗显示，初始化表单
 */
watch(() => props.visible, async (val) => {
  if (val) {
    if (props.row) {
      // 编辑：拉详情（确保拿到完整字段）
      try {
        const detail = await sysAppService.getById(props.row.id)
        form.value = { ...defaultForm, ...detail }
      } catch {
        // 拉取失败回退到 row
        form.value = { ...defaultForm, ...props.row }
      }
    } else {
      // 新增：重置
      form.value = { ...defaultForm }
    }
  }
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="form.id ? '编辑应用' : '新增应用'"
    width="760px"
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-tabs>
        <!-- Tab 1: 基础信息 -->
        <el-tab-pane label="基础信息">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入应用名称" />
          </el-form-item>
          <el-form-item label="所有者类型" prop="ownerType">
            <el-select v-model="form.ownerType" style="width: 100%">
              <el-option v-for="opt in ownerTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="平台" prop="platform">
            <el-select v-model="form.platform" style="width: 100%">
              <el-option v-for="opt in platformOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.description" type="textarea" :rows="2" placeholder="备注" />
          </el-form-item>
          <el-form-item label="排序号">
            <el-input-number v-model="form.sortNo" :min="0" style="width: 200px" />
          </el-form-item>
        </el-tab-pane>

        <!-- Tab 2: 凭证信息 -->
        <el-tab-pane label="凭证信息">
          <el-form-item label="应用ID">
            <el-input v-model.trim="form.appId" placeholder="第三方平台应用ID（UNIQUE）" />
          </el-form-item>
          <el-form-item label="应用密钥">
            <el-input
              v-model="form.appSecret"
              type="password"
              show-password
              placeholder="留空表示不修改"
            />
          </el-form-item>
          <el-form-item label="应用Key">
            <el-input
              v-model="form.appKey"
              type="password"
              show-password
              placeholder="留空表示不修改"
            />
          </el-form-item>
          <el-form-item label="AES Key">
            <el-input
              v-model="form.aesKey"
              type="password"
              show-password
              placeholder="留空表示不修改"
            />
          </el-form-item>
          <el-form-item label="证书">
            <el-input
              v-model="form.certificates"
              type="textarea"
              :rows="4"
              placeholder='示例：[{"name":"cert1","content":"<PEM>"}]'
            />
            <div class="text-xs text-gray-400 mt-1">
              多证书 JSON 数组。格式：[&#123;name, content&#125;]。待后端文件上传接口就绪后升级为文件上传。
            </div>
          </el-form-item>
        </el-tab-pane>

        <!-- Tab 3: 接口配置 -->
        <el-tab-pane label="接口配置">
          <el-form-item label="回调地址">
            <el-input v-model.trim="form.redirectUri" placeholder="OAuth2 回调地址" />
          </el-form-item>
          <el-form-item label="支付回调">
            <el-input v-model.trim="form.notifyUrl" placeholder="支付回调 URL" />
          </el-form-item>
          <el-form-item label="API 根地址">
            <el-input v-model.trim="form.apiBase" placeholder="API 根地址" />
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model.trim="form.merchantId" placeholder="商户号" />
          </el-form-item>
          <el-form-item label="签名方式">
            <el-select v-model="form.signType" style="width: 100%">
              <el-option v-for="opt in signTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
            </el-select>
          </el-form-item>
        </el-tab-pane>

        <!-- Tab 4: 高级 -->
        <el-tab-pane label="高级">
          <el-form-item label="沙箱环境">
            <el-switch
              v-model="form.isSandbox"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="扩展 JSON">
            <el-input
              v-model="form.extra"
              type="textarea"
              :rows="4"
              placeholder='示例：{"key":"value"}'
            />
            <div class="text-xs text-gray-400 mt-1">
              JSON 扩展字段，提交前需通过 JSON 格式校验
            </div>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>
```

- [ ] **Step 2: 验证类型检查**

Run:
```bash
cd admin-ui && npx vue-tsc --noEmit --skipLibCheck
```
Expected: 无错误输出

- [ ] **Step 3: Commit**

```bash
git add admin-ui/src/views/system/app/SysAppFormDialog.vue
git commit -m "feat(sysApp): add SysApp form dialog with 4 tabs (basic/credentials/api/advanced)"
```

---

## Task 7: 端到端验证

**Files:** 无（验证任务）

> **依赖**：所有前置任务（Task 1-6）已完成。

- [ ] **Step 1: 运行类型检查**

Run:
```bash
pnpm --filter admin-ui type-check
```
Expected: 0 errors

- [ ] **Step 2: 运行 Lint**

Run:
```bash
pnpm --filter admin-ui lint
```
Expected: 0 errors

- [ ] **Step 3: 启动 dev server 并验证**

```bash
pnpm dev:admin
```

打开浏览器，登录后访问 `/system/app`，逐条验证：

- [ ] **Step 3.1 列表加载**
  - 页面正常打开，无 console error
  - 默认加载列表数据
  - 6 列展示正确（应用名称/平台/所有者/应用ID/状态/创建时间）

- [ ] **Step 3.2 查询**
  - 按 name 过滤：输入 → 列表更新
  - 按 platform 过滤：选择微信 → 列表只显示微信
  - 按 ownerType 过滤：选择平台级 → 列表只显示 PLATFORM
  - 按 status 过滤：选择禁用 → 列表只显示禁用项

- [ ] **Step 3.3 新增**
  - 点「新增应用」→ 弹窗打开，默认 4 Tab
  - 填必填项（name=测试应用, ownerType=PLATFORM, platform=wechat）→ 提交
  - 列表出现新行
  - devtools Network 检查 `POST /system/admin/app` 返回 200

- [ ] **Step 3.4 编辑**
  - 点行内编辑 → 弹窗加载详情
  - 4 个 Tab 正确回显
  - 修改 name → 提交 → 列表更新

- [ ] **Step 3.5 敏感字段验证**
  - 编辑时 appSecret 留空 → 提交
  - 重新打开编辑，appSecret 字段应保持原值（不修改）
  - devtools Network 检查 `PUT /system/admin/app` 请求体中 appSecret 字段为空字符串

- [ ] **Step 3.6 JSON 字段验证**
  - certificates 输入 `{invalid json` → 提交
  - 应被拦截并提示「certificates JSON 格式错误」
  - extra 同样验证

- [ ] **Step 3.7 启停**
  - 点击状态 Switch → 接口调用 → 列表状态切换
  - 模拟失败：可在 devtools 拦截请求，验证 row.status 回滚

- [ ] **Step 3.8 删除**
  - 点击删除 → 二次确认弹窗
  - 确认 → 行从列表消失
  - devtools Network 检查 `DELETE /system/admin/app/{id}` 返回 200

- [ ] **Step 3.9 批量删除**
  - 勾选 2-3 行 → 批量删除按钮（toolbar）→ 确认 → 全部消失

- [ ] **Step 3.10 导出**
  - 点击导出 → 下载 CSV 文件
  - 文件名包含日期
  - 字段对应列表列

- [ ] **Step 3.11 脱敏验证**
  - devtools Network 检查 `GET /system/admin/app/page` 返回的 records
  - **不应**包含 appSecret / appKey / aesKey 明文
  - 列表 UI 中这三个字段**没有**展示位

- [ ] **Step 3.12 菜单展示**
  - 侧边栏「系统管理」分组下出现「应用集成」子菜单
  - 点击跳转 `/system/app`
  - 中文/英文切换均正常

- [ ] **Step 4: 验证 git log**

Run:
```bash
git log --oneline -10
```
Expected: 看到 6 个提交：
- feat(sysApp): add sysAppService extending BaseService
- feat(sysApp): export sysAppService from system service index
- feat(sysApp): add systemApp i18n key
- feat(sysApp): register /system/app route in system router
- feat(sysApp): add SysApp list page
- feat(sysApp): add SysApp form dialog

---

## 回滚计划

如果出现问题，按以下顺序回滚：

1. 回滚 Task 6: `git revert <task6-commit>`（删除表单）
2. 回滚 Task 5: `git revert <task5-commit>`（删除列表页）
3. 回滚 Task 4: `git revert <task4-commit>`（取消路由）
4. 回滚 Task 3: `git revert <task3-commit>`（删除 i18n）
5. 回滚 Task 2: `git revert <task2-commit>`（取消导出）
6. 回滚 Task 1: `git revert <task1-commit>`（删除 Service）

如需完全回滚：`git reset --hard <task0-commit>`

---

## 测试清单

### 静态检查
- [ ] `pnpm --filter admin-ui type-check` 0 errors
- [ ] `pnpm --filter admin-ui lint` 0 errors

### 列表功能
- [ ] 列表加载正常
- [ ] 4 个查询条件均生效
- [ ] 分页正常
- [ ] 列设置可隐藏/显示列
- [ ] 导出 CSV 成功

### 表单功能
- [ ] 新增：填写必填项 → 提交 → 列表出现新行
- [ ] 编辑：弹窗加载详情 → 修改 → 提交 → 列表更新
- [ ] 必填校验：name/ownerType/platform 未填时拦截
- [ ] JSON 校验：certificates/extra 非法格式拦截
- [ ] 敏感字段：appSecret/appKey/aesKey 留空不修改

### 交互
- [ ] 启停：状态 Switch 切换正常，失败时回滚
- [ ] 单删：删除确认 → 行消失
- [ ] 批删：选中多行 → 批量删除 → 全部消失
- [ ] 弹窗：宽度 760px，4 Tab 可切换

### 菜单与导航
- [ ] 侧边栏「系统管理 → 应用集成」菜单显示
- [ ] 路由跳转正常
- [ ] 中英文 i18n 切换正常

### 脱敏
- [ ] 列表中无任何明文密钥字段
- [ ] 列表接口返回的 records 不含 appSecret/appKey/aesKey 明文

---

## 关联信息

- **Spec 文档**: `docs/superpowers/specs/2026-06-07-sysapp-management-design.md`
- **工单**: rui/rui-frontend#4
- **后端 Issue**: rui/rui-framework#4（文件上传接口依赖，本期不阻塞）
- **参考实现**: `admin-ui/src/views/system/oauth2-client/Index.vue` + `OAuth2ClientFormDialog.vue`

---

**计划状态**: 待评审  
**下一步**: 用户评审通过后，使用 `superpowers-subagent-driven-development` 或 `superpowers-executing-plans` 执行