create-simpleadmin-ui 2.0.0

package/template/src/views/system/openApp/index.vue

@@ -0,0 +1,596 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Key, Plus, Refresh, Search } from '@element-plus/icons-vue'
+import { get, post, put, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+
+interface OpenAppItem {
+  id: number
+  appId: string
+  appName: string
+  appSecretMasked: string
+  status: number
+  expireTime?: string | null
+  createTime?: string
+  remark?: string
+}
+
+interface OpenAppForm {
+  id?: number
+  appId: string
+  appName: string
+  appSecret: string
+  status: number
+  expireTime: string | null
+  remark: string
+}
+
+interface SecretReveal {
+  appId: string
+  appSecret: string
+}
+
+const loading = ref(false)
+const saving = ref(false)
+const total = ref(0)
+const list = ref<OpenAppItem[]>([])
+const dialogVisible = ref(false)
+const secretVisible = ref(false)
+const secretReveal = reactive<SecretReveal>({ appId: '', appSecret: '' })
+
+const query = reactive({
+  pageIndex: 1,
+  pageSize: 10,
+  keyword: '',
+  status: undefined as number | undefined,
+})
+
+const form = reactive<OpenAppForm>({
+  id: undefined,
+  appId: '',
+  appName: '',
+  appSecret: '',
+  status: 0,
+  expireTime: null,
+  remark: '',
+})
+
+const stats = reactive({ total: 0, normal: 0, disabled: 0 })
+
+async function loadStats(pageTotal?: number) {
+  const base = { pageIndex: 1, pageSize: 1, keyword: query.keyword || undefined }
+  const unfiltered = query.status === undefined || query.status === null
+  try {
+    const tasks: Promise<void>[] = []
+    if (unfiltered && pageTotal != null) {
+      stats.total = pageTotal
+    } else {
+      tasks.push(
+        get<{ total: number }>('/open-apps', base).then((all) => {
+          stats.total = all.total
+        }),
+      )
+    }
+    tasks.push(
+      get<{ total: number }>('/open-apps', { ...base, status: 0 }).then((r) => {
+        stats.normal = r.total
+      }),
+      get<{ total: number }>('/open-apps', { ...base, status: 1 }).then((r) => {
+        stats.disabled = r.total
+      }),
+    )
+    await Promise.all(tasks)
+  } catch {
+    stats.total = total.value
+    stats.normal = 0
+    stats.disabled = 0
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      pageIndex: query.pageIndex,
+      pageSize: query.pageSize,
+      keyword: query.keyword || undefined,
+    }
+    if (query.status !== undefined && query.status !== null) params.status = query.status
+    const data = await get<{ total: number; items: OpenAppItem[] }>('/open-apps', params)
+    total.value = data.total
+    list.value = data.items || []
+    await loadStats(data.total)
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  query.pageIndex = 1
+  load()
+}
+
+function resetQuery() {
+  query.keyword = ''
+  query.status = undefined
+  query.pageIndex = 1
+  load()
+}
+
+function resetForm() {
+  Object.assign(form, {
+    id: undefined,
+    appId: '',
+    appName: '',
+    appSecret: '',
+    status: 0,
+    expireTime: null,
+    remark: '',
+  })
+}
+
+function showSecretOnce(appId: string, appSecret: string) {
+  secretReveal.appId = appId
+  secretReveal.appSecret = appSecret
+  secretVisible.value = true
+}
+
+async function copySecret() {
+  try {
+    await navigator.clipboard.writeText(secretReveal.appSecret)
+    ElMessage.success('密钥已复制')
+  } catch {
+    ElMessage.warning('复制失败，请手动选中复制')
+  }
+}
+
+function openCreate() {
+  resetForm()
+  dialogVisible.value = true
+}
+
+async function openEdit(row: OpenAppItem) {
+  const detail = await get<{
+    id: number
+    appId: string
+    appName: string
+    appSecretMasked: string
+    status: number
+    expireTime?: string | null
+    remark?: string
+  }>(`/open-apps/${row.id}`)
+  Object.assign(form, {
+    id: detail.id,
+    appId: detail.appId || '',
+    appName: detail.appName || '',
+    appSecret: '',
+    status: detail.status ?? 0,
+    expireTime: detail.expireTime || null,
+    remark: detail.remark || '',
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.appId.trim()) {
+    ElMessage.warning('请填写 AppId')
+    return
+  }
+  if (!form.appName.trim()) {
+    ElMessage.warning('请填写应用名称')
+    return
+  }
+  if (!form.id && form.appSecret.trim() && form.appSecret.trim().length < 16) {
+    ElMessage.warning('AppSecret 长度至少 16，或留空由系统生成')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      id: form.id,
+      appId: form.appId.trim(),
+      appName: form.appName.trim(),
+      appSecret: form.appSecret.trim() || null,
+      status: form.status,
+      expireTime: form.expireTime || null,
+      remark: form.remark.trim() || null,
+    }
+    if (form.id) {
+      await put('/open-apps', payload)
+      ElMessage.success('保存成功')
+    } else {
+      const created = await post<{ id: number; appId: string; appSecret: string }>('/open-apps', payload)
+      ElMessage.success('创建成功，请妥善保存密钥')
+      showSecretOnce(created.appId, created.appSecret)
+    }
+    dialogVisible.value = false
+    load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function resetSecret(row: OpenAppItem) {
+  await ElMessageBox.confirm(
+    `重置后旧密钥立即失效。确认重置「${row.appName}」的签名密钥？`,
+    '重置密钥',
+    { type: 'warning' },
+  )
+  const result = await put<{ id: number; appId: string; appSecret: string }>(
+    `/open-apps/${row.id}/reset-secret`,
+  )
+  ElMessage.success('密钥已重置，请妥善保存')
+  showSecretOnce(result.appId, result.appSecret)
+  load()
+}
+
+async function remove(row: OpenAppItem) {
+  await ElMessageBox.confirm(`确认删除开放应用「${row.appName}」？`, '提示', { type: 'warning' })
+  await del('/open-apps', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AppPage title="开放应用" description="为第三方分配独立 AppId / AppSecret，用于请求 HMAC 签名">
+    <div class="oa-stats">
+      <div class="oa-stats__item">
+        <span class="oa-stats__num">{{ stats.total }}</span>
+        <span class="oa-stats__label">全部应用</span>
+      </div>
+      <div class="oa-stats__item oa-stats__item--ok">
+        <span class="oa-stats__num">{{ stats.normal }}</span>
+        <span class="oa-stats__label">正常</span>
+      </div>
+      <div class="oa-stats__item oa-stats__item--off">
+        <span class="oa-stats__num">{{ stats.disabled }}</span>
+        <span class="oa-stats__label">停用</span>
+      </div>
+      <div class="oa-stats__item oa-stats__item--hit">
+        <span class="oa-stats__num">{{ total }}</span>
+        <span class="oa-stats__label">当前筛选</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="query.keyword"
+        clearable
+        placeholder="搜索 AppId / 名称"
+        style="width: 220px"
+        @keyup.enter="search"
+      />
+      <el-select v-model="query.status" clearable placeholder="状态" style="width: 120px">
+        <el-option label="正常" :value="0" />
+        <el-option label="停用" :value="1" />
+      </el-select>
+      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
+      <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      <div class="toolbar__spacer" />
+      <el-button type="success" :icon="Plus" v-permission="'system:openApp:add'" @click="openCreate">
+        新增应用
+      </el-button>
+    </div>
+
+    <div class="table-wrap" v-loading="loading">
+      <el-table :data="list" border stripe empty-text="暂无开放应用">
+        <el-table-column label="应用名称" min-width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon">
+                <el-icon :size="14"><Key /></el-icon>
+              </span>
+              <strong>{{ row.appName }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="AppId" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.appId }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="密钥" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code class="mono">{{ row.appSecretMasked }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="88" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+              {{ row.status === 0 ? '正常' : '停用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="过期时间" width="170" align="center">
+          <template #default="{ row }">
+            <span v-if="row.expireTime" class="datetime-cell">{{ formatDateTime(row.expireTime) }}</span>
+            <span v-else class="muted">长期</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" width="170" align="center">
+          <template #default="{ row }">
+            <span class="datetime-cell">{{ formatDateTime(row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row.remark">{{ row.remark }}</span>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:openApp:edit'"
+                @click="openEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="warning"
+                v-permission="'system:openApp:edit'"
+                @click="resetSecret(row)"
+              >
+                重置密钥
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:openApp:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="pager">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        v-model:current-page="query.pageIndex"
+        v-model:page-size="query.pageSize"
+        :page-sizes="[10, 20, 50]"
+        @current-change="load"
+        @size-change="
+          () => {
+            query.pageIndex = 1
+            load()
+          }
+        "
+      />
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="form.id ? '编辑开放应用' : '新增开放应用'"
+      width="560px"
+      class="sa-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="96px">
+        <el-form-item label="AppId" required>
+          <el-input
+            v-model="form.appId"
+            maxlength="64"
+            placeholder="对应请求头 X-App-Id"
+            :disabled="!!form.id"
+          />
+        </el-form-item>
+        <el-form-item label="应用名称" required>
+          <el-input v-model="form.appName" maxlength="128" placeholder="展示名称" />
+        </el-form-item>
+        <el-form-item v-if="!form.id" label="AppSecret">
+          <el-input
+            v-model="form.appSecret"
+            type="password"
+            show-password
+            maxlength="256"
+            placeholder="留空则系统自动生成（≥16）"
+          />
+        </el-form-item>
+        <el-form-item v-else label="密钥">
+          <span class="muted">列表仅显示脱敏值；如需更换请使用「重置密钥」</span>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="0">正常</el-radio>
+            <el-radio :value="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="过期时间">
+          <el-date-picker
+            v-model="form.expireTime"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            placeholder="空表示长期有效"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="200" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="secretVisible"
+      title="请妥善保存密钥"
+      width="520px"
+      class="sa-dialog"
+      append-to-body
+      align-center
+      :close-on-click-modal="false"
+    >
+      <el-alert
+        type="warning"
+        :closable="false"
+        title="明文密钥仅展示一次，关闭后无法再次查看，请立即复制并交给对接方。"
+        style="margin-bottom: 14px"
+      />
+      <el-form label-width="88px">
+        <el-form-item label="AppId">
+          <code class="mono">{{ secretReveal.appId }}</code>
+        </el-form-item>
+        <el-form-item label="AppSecret">
+          <code class="mono secret-block">{{ secretReveal.appSecret }}</code>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="primary" @click="copySecret">复制密钥</el-button>
+        <el-button @click="secretVisible = false">已保存</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.oa-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.oa-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.oa-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+.oa-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.oa-stats__item--ok .oa-stats__num {
+  color: #15803d;
+}
+.oa-stats__item--off .oa-stats__num {
+  color: #b91c1c;
+}
+.oa-stats__item--hit .oa-stats__num {
+  color: #0369a1;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+.toolbar__spacer {
+  flex: 1;
+}
+.table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+  word-break: break-all;
+}
+.secret-block {
+  display: block;
+  padding: 8px 10px;
+  line-height: 1.5;
+}
+.muted {
+  color: var(--sa-ink-muted);
+}
+.datetime-cell {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.row-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+}
+.pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+@media (max-width: 900px) {
+  .oa-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.sa-dialog.el-dialog {
+  width: min(560px, calc(100vw - 32px)) !important;
+  max-height: 88vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.sa-dialog .el-dialog__body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(88vh - 140px);
+}
+</style>