From f4aeaf94c4d2557f8b3dacf7d826d42ddd73c324 Mon Sep 17 00:00:00 2001
From: TermiNexus <wyt18222152539wyt@163.com>
Date: Thu, 13 Aug 2026 04:06:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(app):=20=E5=BA=94=E7=94=A8=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=EF=BC=88=E5=BA=94=E7=94=A8=E5=B8=82=E5=9C=BA?=
 =?UTF-8?q?/=E6=88=91=E7=9A=84=E5=BA=94=E7=94=A8/=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=EF=BC=89+=20=E8=B7=AF=E7=94=B1=E4=B8=8E?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/app.ts              |  61 ++++++
 src/router/index.ts         |   6 +
 src/views/app/AppCenter.vue | 394 ++++++++++++++++++++++++++++++++++++
 3 files changed, 461 insertions(+)
 create mode 100644 src/api/app.ts
 create mode 100644 src/views/app/AppCenter.vue

diff --git a/src/api/app.ts b/src/api/app.ts
new file mode 100644
index 0000000..7441ec9
--- /dev/null
+++ b/src/api/app.ts
@@ -0,0 +1,61 @@
+import { get, post } from './request'
+
+/** 应用/功能市场项 */
+export interface AppItem {
+  AppUUID: string
+  AppCode: string
+  AppName: string
+  AppIcon: string
+  AppDesc: string
+  AppType: string
+  AuthRequired: number
+  MenuRootUUID?: string
+  AppSort?: number
+  /** 市场页附加状态 */
+  TenantInstalled?: number
+  TenantAuth?: number
+  UserEnabled?: number
+  ApplyStatus?: number
+}
+
+/** 个人授权申请项（租户管理员审批台） */
+export interface PendingItem {
+  UserAppUUID: string
+  UserUUID: string
+  AppUUID: string
+  AppName: string
+  AppCode: string
+  AppIcon: string
+  ApplyTime: string | null
+}
+
+/** 应用/功能 API 客户端 */
+export const appApi = {
+  /** 应用市场列表（附租户安装/个人启用/申请状态） */
+  market: (): Promise<{ list: AppItem[]; total: number }> => get<{ list: AppItem[]; total: number }>('/API/App/Market'),
+
+  /** 我的应用（当前用户可用） */
+  myApps: (): Promise<{ list: AppItem[]; total: number }> => get<{ list: AppItem[]; total: number }>('/API/App/MyApps'),
+
+  /** 租户管理员：安装企业功能 */
+  install: (AppUUID: string): Promise<AppItem> => post<AppItem>('/API/App/Install', { AppUUID }),
+
+  /** 租户管理员：停用企业功能 */
+  uninstall: (AppUUID: string): Promise<void> => post<void>('/API/App/Uninstall', { AppUUID }),
+
+  /** 个人：启用应用 */
+  enable: (AppUUID: string): Promise<AppItem> => post<AppItem>('/API/App/Enable', { AppUUID }),
+
+  /** 个人：停用应用 */
+  disable: (AppUUID: string): Promise<void> => post<void>('/API/App/Disable', { AppUUID }),
+
+  /** 个人：申请企业授权 */
+  apply: (AppUUID: string): Promise<void> => post<void>('/API/App/Apply', { AppUUID }),
+
+  /** 租户管理员：审批个人授权申请 */
+  approve: (UserAppUUID: string, Approved: boolean): Promise<void> =>
+    post<void>('/API/App/Approve', { UserAppUUID, Approved }),
+
+  /** 租户管理员：待审批申请列表 */
+  pending: (): Promise<{ list: PendingItem[]; total: number }> => get<{ list: PendingItem[]; total: number }>('/API/App/Pending'),
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 9ee8527..717619d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -229,6 +229,12 @@ export const staticRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/company/EpCreate.vue'),
         meta: { title: '企业创建向导（调试）', requiresAuth: true },
       },
+      {
+        path: 'app/center',
+        name: 'AppCenter',
+        component: () => import('@/views/app/AppCenter.vue'),
+        meta: { title: '应用中心', icon: 'Grid', requiresAuth: true, menuGuarded: true },
+      },
       // === 阶段 6：独立工具 ===
       {
         path: 'doc/editor',
diff --git a/src/views/app/AppCenter.vue b/src/views/app/AppCenter.vue
new file mode 100644
index 0000000..2f5edaa
--- /dev/null
+++ b/src/views/app/AppCenter.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+/**
+ * 应用中心 AppCenter
+ *
+ * 功能/应用体系：企业视角叫"功能"（租户安装后全员可用），个人视角叫"应用"（个人启用后自用）。
+ * 三个页签：
+ *   1. 应用市场 —— 全部应用，标注类型（企业功能/个人应用/混合）与安装/启用状态；
+ *      租户管理员可安装/停用企业功能；个人可启用个人应用、申请企业授权
+ *   2. 我的应用 —— 当前用户可用应用（租户已装的企业功能 + 个人已启用）
+ *   3. 授权审批 —— 仅租户管理员：审批个人对企业授权应用的申请
+ *
+ * 接口：GET/POST /API/App/*
+ */
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Grid } from '@element-plus/icons-vue'
+import { appApi, type AppItem, type PendingItem } from '@/api/app'
+import { useUserStore } from '@/stores/user'
+import { setPageTitle } from '@/utils/serverScope'
+
+const userStore = useUserStore()
+
+// === 状态 ===
+const activeTab = ref<'market' | 'mine' | 'pending'>('market')
+const market = ref<AppItem[]>([])
+const myApps = ref<AppItem[]>([])
+const pending = ref<PendingItem[]>([])
+const loading = ref(false)
+
+const isAdmin = computed(() => userStore.isAdmin)
+
+// === 类型标签 ===
+function typeLabel(t: string): { text: string; type: 'success' | 'info' | 'warning' } {
+  if (t === 'enterprise') return { text: '企业功能', type: 'success' }
+  if (t === 'personal') return { text: '个人应用', type: 'info' }
+  return { text: '混合', type: 'warning' }
+}
+
+function applyStatusLabel(s: number | undefined): string {
+  if (s === 1) return '授权申请中'
+  if (s === 2) return '已授权'
+  if (s === 3) return '已拒绝'
+  return ''
+}
+
+// === 加载 ===
+async function loadMarket(): Promise<void> {
+  try {
+    const r = await appApi.market()
+    market.value = r.list
+  } catch { /* 拦截器已提示 */ }
+}
+
+async function loadMyApps(): Promise<void> {
+  try {
+    const r = await appApi.myApps()
+    myApps.value = r.list
+  } catch { /* 拦截器已提示 */ }
+}
+
+async function loadPending(): Promise<void> {
+  try {
+    const r = await appApi.pending()
+    pending.value = r.list
+  } catch { /* 拦截器已提示 */ }
+}
+
+async function loadAll(): Promise<void> {
+  loading.value = true
+  try {
+    await Promise.all([loadMarket(), loadMyApps(), loadPending()])
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  setPageTitle('应用中心')
+  await loadAll()
+})
+
+function switchTab(tab: 'market' | 'mine' | 'pending'): void {
+  activeTab.value = tab
+  if (tab === 'market') void loadMarket()
+  if (tab === 'mine') void loadMyApps()
+  if (tab === 'pending') void loadPending()
+}
+
+// === 操作 ===
+
+/** 租户管理员：安装/停用企业功能 */
+async function toggleInstall(a: AppItem): Promise<void> {
+  try {
+    if (a.TenantInstalled) {
+      await appApi.uninstall(a.AppUUID)
+      ElMessage.success(`已停用「${a.AppName}」`)
+    } else {
+      await appApi.install(a.AppUUID)
+      ElMessage.success(`已安装「${a.AppName}」，全员可用`)
+    }
+    await Promise.all([loadMarket(), loadMyApps()])
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 个人：启用/停用应用 */
+async function toggleEnable(a: AppItem): Promise<void> {
+  try {
+    if (a.UserEnabled) {
+      await appApi.disable(a.AppUUID)
+      ElMessage.success('已停用')
+    } else {
+      await appApi.enable(a.AppUUID)
+      ElMessage.success('已启用')
+    }
+    await Promise.all([loadMarket(), loadMyApps()])
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 个人：申请企业授权 */
+async function applyAuth(a: AppItem): Promise<void> {
+  try {
+    await appApi.apply(a.AppUUID)
+    ElMessage.success(`已提交「${a.AppName}」授权申请，等待租户管理员审批`)
+    await loadMarket()
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 租户管理员：审批 */
+async function approve(u: PendingItem, ok: boolean): Promise<void> {
+  try {
+    await appApi.approve(u.UserAppUUID, ok)
+    ElMessage.success(ok ? '已通过' : '已拒绝')
+    await Promise.all([loadPending(), loadMarket()])
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 市场卡片操作按钮（按类型 + 管理员/个人视角返回描述文案） */
+function marketActionDesc(a: AppItem): string {
+  if (a.AuthRequired && a.ApplyStatus === 1) return '授权申请中'
+  if (a.TenantInstalled) return '企业已安装'
+  if (a.UserEnabled) return '个人已启用'
+  return ''
+}
+</script>
+
+<template>
+  <div class="app-center-page">
+    <el-card shadow="never" class="app-center-card">
+      <template #header>
+        <div class="app-center-header">
+          <el-icon class="header-icon"><Grid /></el-icon>
+          <span>应用中心</span>
+          <span class="header-sub">企业功能 · 个人应用 · 企业授权</span>
+        </div>
+      </template>
+
+      <el-tabs v-model="activeTab" @tab-change="switchTab(activeTab as 'market' | 'mine' | 'pending')">
+        <!-- 应用市场 -->
+        <el-tab-pane label="应用市场" name="market">
+          <div v-loading="loading" class="app-grid">
+            <div v-for="a in market" :key="a.AppUUID" class="app-card">
+              <div class="app-card-head">
+                <div class="app-icon">
+                  <el-icon :size="24"><component :is="a.AppIcon || 'Grid'" /></el-icon>
+                </div>
+                <div class="app-titles">
+                  <div class="app-name">{{ a.AppName }}</div>
+                  <div class="app-code">{{ a.AppCode }}</div>
+                </div>
+                <el-tag :type="typeLabel(a.AppType).type" size="small">{{ typeLabel(a.AppType).text }}</el-tag>
+              </div>
+              <div class="app-desc">{{ a.AppDesc || '暂无描述' }}</div>
+              <div class="app-foot">
+                <span v-if="marketActionDesc(a)" class="app-status">{{ marketActionDesc(a) }}</span>
+                <span v-else-if="a.ApplyStatus === 2" class="app-status ok">已授权</span>
+                <span v-else-if="a.ApplyStatus === 3" class="app-status err">已拒绝</span>
+                <div class="spacer" />
+                <!-- 企业功能：管理员安装/停用；普通用户提示 -->
+                <template v-if="a.AppType === 'enterprise'">
+                  <el-button v-if="isAdmin" size="small" :type="a.TenantInstalled ? 'danger' : 'primary'"
+                    :plain="!!a.TenantInstalled" @click="toggleInstall(a)">
+                    {{ a.TenantInstalled ? '停用' : '安装' }}
+                  </el-button>
+                  <el-tag v-else size="small" type="info" effect="plain">由企业管理员开通</el-tag>
+                </template>
+                <!-- 个人应用：启用/停用/申请 -->
+                <template v-else-if="a.AppType === 'personal'">
+                  <el-button v-if="a.AuthRequired && !a.UserEnabled && !a.ApplyStatus" size="small" type="primary"
+                    @click="applyAuth(a)">申请授权</el-button>
+                  <el-button v-else-if="!a.AuthRequired || a.ApplyStatus === 2" size="small"
+                    :type="a.UserEnabled ? 'danger' : 'primary'" :plain="!!a.UserEnabled"
+                    @click="toggleEnable(a)">
+                    {{ a.UserEnabled ? '停用' : '启用' }}
+                  </el-button>
+                  <el-tag v-else size="small" type="info" effect="plain">{{ applyStatusLabel(a.ApplyStatus) }}</el-tag>
+                </template>
+                <!-- 混合：管理员可安装，个人可启用 -->
+                <template v-else>
+                  <template v-if="isAdmin">
+                    <el-button size="small" :type="a.TenantInstalled ? 'danger' : 'primary'"
+                      :plain="!!a.TenantInstalled" @click="toggleInstall(a)">
+                      {{ a.TenantInstalled ? '停用' : '安装' }}
+                    </el-button>
+                  </template>
+                  <el-button v-else size="small" :type="a.UserEnabled ? 'danger' : 'primary'"
+                    :plain="!!a.UserEnabled" @click="toggleEnable(a)">
+                    {{ a.UserEnabled ? '停用' : '启用' }}
+                  </el-button>
+                </template>
+              </div>
+            </div>
+            <el-empty v-if="!loading && !market.length" description="暂无可用的应用" :image-size="80" />
+          </div>
+        </el-tab-pane>
+
+        <!-- 我的应用 -->
+        <el-tab-pane label="我的应用" name="mine">
+          <div v-loading="loading" class="app-grid">
+            <div v-for="a in myApps" :key="a.AppUUID" class="app-card">
+              <div class="app-card-head">
+                <div class="app-icon">
+                  <el-icon :size="24"><component :is="a.AppIcon || 'Grid'" /></el-icon>
+                </div>
+                <div class="app-titles">
+                  <div class="app-name">{{ a.AppName }}</div>
+                  <div class="app-code">{{ a.AppCode }}</div>
+                </div>
+                <el-tag :type="typeLabel(a.AppType).type" size="small">{{ typeLabel(a.AppType).text }}</el-tag>
+              </div>
+              <div class="app-desc">{{ a.AppDesc || '暂无描述' }}</div>
+              <div class="app-foot">
+                <span class="app-status ok">{{ a.TenantInstalled && a.AppType !== 'personal' ? '企业已开通' : '个人已启用' }}</span>
+                <div class="spacer" />
+                <el-button v-if="a.AppType !== 'enterprise'" size="small" type="danger" plain @click="toggleEnable(a)">停用</el-button>
+                <el-tag v-else size="small" type="success" effect="plain">企业功能</el-tag>
+              </div>
+            </div>
+            <el-empty v-if="!loading && !myApps.length" description="暂无可用应用，请到应用市场启用" :image-size="80" />
+          </div>
+        </el-tab-pane>
+
+        <!-- 授权审批（仅管理员） -->
+        <el-tab-pane v-if="isAdmin" label="授权审批" name="pending">
+          <div v-loading="loading" class="pending-list">
+            <div v-for="u in pending" :key="u.UserAppUUID" class="pending-row">
+              <div class="app-icon small">
+                <el-icon :size="18"><component :is="u.AppIcon || 'Grid'" /></el-icon>
+              </div>
+              <div class="pending-main">
+                <div class="pending-title">{{ u.AppName }}</div>
+                <div class="pending-sub">申请人 {{ u.UserUUID.slice(0, 8) }} · 申请于 {{ u.ApplyTime ? new Date(u.ApplyTime).toLocaleString('zh-CN', { hour12: false }) : '-' }}</div>
+              </div>
+              <div class="spacer" />
+              <el-button size="small" type="danger" @click="approve(u, false)">拒绝</el-button>
+              <el-button size="small" type="primary" @click="approve(u, true)">通过</el-button>
+            </div>
+            <el-empty v-if="!loading && !pending.length" description="暂无待审批的授权申请" :image-size="80" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-center-page {
+  padding: 16px;
+  box-sizing: border-box;
+}
+.app-center-card {
+  border-radius: 8px;
+}
+.app-center-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 15px;
+  .header-icon {
+    color: var(--el-color-primary);
+  }
+  .header-sub {
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+}
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 14px;
+  min-height: 120px;
+}
+.app-card {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: box-shadow 0.15s;
+  &:hover {
+    box-shadow: var(--el-box-shadow-light);
+  }
+}
+.app-card-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.app-icon {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--el-color-primary-light-8), var(--el-color-primary-light-7));
+  color: var(--el-color-primary);
+  &.small {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+  }
+}
+.app-titles {
+  flex: 1;
+  min-width: 0;
+}
+.app-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-code {
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+}
+.app-desc {
+  flex: 1;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+  min-height: 36px;
+}
+.app-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.spacer {
+  flex: 1;
+}
+.app-status {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  &.ok {
+    color: var(--el-color-success);
+  }
+  &.err {
+    color: var(--el-color-danger);
+  }
+}
+.pending-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pending-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+.pending-main {
+  flex: 1;
+  min-width: 0;
+}
+.pending-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+.pending-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+</style>