From b15d3fe89d2b358decee068630b6d1d6d776775c Mon Sep 17 00:00:00 2001
From: TermiNexus <wyt18222152539wyt@163.com>
Date: Thu, 13 Aug 2026 04:33:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor(app):=20=E5=BA=94=E7=94=A8=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E6=94=B9=E7=88=B6=E7=BA=A7=E8=8F=9C=E5=8D=95=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E6=8B=86=E5=88=86=20=E5=BA=94=E7=94=A8=E5=B8=82?=
 =?UTF-8?q?=E5=9C=BA/=E6=88=91=E7=9A=84=E5=BA=94=E7=94=A8/=E6=8E=88?=
 =?UTF-8?q?=E6=9D=83=E5=AE=A1=E6=89=B9=20=E4=B8=89=E4=B8=AA=E5=AD=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts          |  21 ++-
 src/views/app/AppMarket.vue  | 262 +++++++++++++++++++++++++++++++++++
 src/views/app/AppMine.vue    | 182 ++++++++++++++++++++++++
 src/views/app/AppPending.vue | 142 +++++++++++++++++++
 4 files changed, 603 insertions(+), 4 deletions(-)
 create mode 100644 src/views/app/AppMarket.vue
 create mode 100644 src/views/app/AppMine.vue
 create mode 100644 src/views/app/AppPending.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index e949e95..1bb0f7d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -229,11 +229,24 @@ 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 },
+        path: 'app/market',
+        name: 'AppMarket',
+        component: () => import('@/views/app/AppMarket.vue'),
+        meta: { title: '应用市场', icon: 'Grid', requiresAuth: true, menuGuarded: true },
+      },
+      {
+        path: 'app/mine',
+        name: 'AppMine',
+        component: () => import('@/views/app/AppMine.vue'),
+        meta: { title: '我的应用', icon: 'Files', requiresAuth: true, menuGuarded: true },
+      },
+      {
+        path: 'app/pending',
+        name: 'AppPending',
+        component: () => import('@/views/app/AppPending.vue'),
+        meta: { title: '授权审批', icon: 'Stamp', requiresAuth: true, menuGuarded: true },
       },
       // === 阶段 6：独立工具 ===
       {
diff --git a/src/views/app/AppMarket.vue b/src/views/app/AppMarket.vue
new file mode 100644
index 0000000..04c1c36
--- /dev/null
+++ b/src/views/app/AppMarket.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+/**
+ * 应用中心 · 应用市场
+ *
+ * 全部应用，标注类型（企业功能/个人应用/混合）与安装/启用状态。
+ * 租户管理员可安装/停用企业功能；个人可启用个人应用、申请企业授权。
+ * 接口：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 } from '@/api/app'
+import { useUserStore } from '@/stores/user'
+import { setPageTitle } from '@/utils/serverScope'
+
+setPageTitle('应用市场')
+
+const userStore = useUserStore()
+const isAdmin = computed(() => userStore.isAdmin)
+
+const market = ref<AppItem[]>([])
+const loading = ref(false)
+
+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> {
+  loading.value = true
+  try {
+    const r = await appApi.market()
+    market.value = r.list
+  } catch { /* 拦截器已提示 */ } finally {
+    loading.value = false
+  }
+}
+
+/** 租户管理员：安装/停用企业功能 */
+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 loadMarket()
+  } 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 loadMarket()
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 个人：申请企业授权 */
+async function applyAuth(a: AppItem): Promise<void> {
+  try {
+    await appApi.apply(a.AppUUID)
+    ElMessage.success(`已提交「${a.AppName}」授权申请，等待租户管理员审批`)
+    await loadMarket()
+  } catch { /* 拦截器已提示 */ }
+}
+
+/** 市场卡片操作按钮（按类型 + 管理员/个人视角返回描述文案） */
+function marketActionDesc(a: AppItem): string {
+  if (a.AuthRequired && a.ApplyStatus === 1) return '授权申请中'
+  if (a.TenantInstalled) return '企业已安装'
+  if (a.UserEnabled) return '个人已启用'
+  return ''
+}
+
+onMounted(loadMarket)
+</script>
+
+<template>
+  <div class="app-market-page">
+    <el-card shadow="never" class="app-card-wrap">
+      <template #header>
+        <div class="app-header">
+          <el-icon class="header-icon"><Grid /></el-icon>
+          <span>应用市场</span>
+          <span class="header-sub">企业功能 · 个人应用 · 企业授权</span>
+        </div>
+      </template>
+
+      <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-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-market-page {
+  padding: 16px;
+  box-sizing: border-box;
+}
+.app-card-wrap {
+  border-radius: 8px;
+}
+.app-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);
+}
+.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);
+  }
+}
+</style>
diff --git a/src/views/app/AppMine.vue b/src/views/app/AppMine.vue
new file mode 100644
index 0000000..9c37fee
--- /dev/null
+++ b/src/views/app/AppMine.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+/**
+ * 应用中心 · 我的应用
+ *
+ * 当前用户可用应用（租户已装的企业功能 + 个人已启用的应用）。
+ * 接口：GET/POST /API/App/*
+ */
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Grid } from '@element-plus/icons-vue'
+import { appApi, type AppItem } from '@/api/app'
+import { setPageTitle } from '@/utils/serverScope'
+
+setPageTitle('我的应用')
+
+const myApps = ref<AppItem[]>([])
+const loading = ref(false)
+
+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' }
+}
+
+async function loadMyApps(): Promise<void> {
+  loading.value = true
+  try {
+    const r = await appApi.myApps()
+    myApps.value = r.list
+  } catch { /* 拦截器已提示 */ } finally {
+    loading.value = false
+  }
+}
+
+/** 个人：停用应用（企业功能不可停用） */
+async function toggleDisable(a: AppItem): Promise<void> {
+  try {
+    await appApi.disable(a.AppUUID)
+    ElMessage.success('已停用')
+    await loadMyApps()
+  } catch { /* 拦截器已提示 */ }
+}
+
+onMounted(loadMyApps)
+</script>
+
+<template>
+  <div class="app-mine-page">
+    <el-card shadow="never" class="app-card-wrap">
+      <template #header>
+        <div class="app-header">
+          <el-icon class="header-icon"><Grid /></el-icon>
+          <span>我的应用</span>
+          <span class="header-sub">企业功能（租户开通）· 个人应用（个人启用）</span>
+        </div>
+      </template>
+
+      <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="toggleDisable(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-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-mine-page {
+  padding: 16px;
+  box-sizing: border-box;
+}
+.app-card-wrap {
+  border-radius: 8px;
+}
+.app-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);
+}
+.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);
+  }
+}
+</style>
diff --git a/src/views/app/AppPending.vue b/src/views/app/AppPending.vue
new file mode 100644
index 0000000..f3b410b
--- /dev/null
+++ b/src/views/app/AppPending.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * 应用中心 · 授权审批（仅租户管理员）
+ *
+ * 审批个人对企业授权应用的申请。
+ * 接口：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 PendingItem } from '@/api/app'
+import { useUserStore } from '@/stores/user'
+import { setPageTitle } from '@/utils/serverScope'
+
+setPageTitle('授权审批')
+
+const userStore = useUserStore()
+const isAdmin = computed(() => userStore.isAdmin)
+
+const pending = ref<PendingItem[]>([])
+const loading = ref(false)
+
+async function loadPending(): Promise<void> {
+  loading.value = true
+  try {
+    const r = await appApi.pending()
+    pending.value = r.list
+  } catch { /* 拦截器已提示 */ } finally {
+    loading.value = false
+  }
+}
+
+/** 审批：通过 / 拒绝 */
+async function approve(u: PendingItem, ok: boolean): Promise<void> {
+  try {
+    await appApi.approve(u.UserAppUUID, ok)
+    ElMessage.success(ok ? '已通过' : '已拒绝')
+    await loadPending()
+  } catch { /* 拦截器已提示 */ }
+}
+
+onMounted(() => {
+  if (isAdmin.value) void loadPending()
+})
+</script>
+
+<template>
+  <div class="app-pending-page">
+    <el-card shadow="never" class="app-card-wrap">
+      <template #header>
+        <div class="app-header">
+          <el-icon class="header-icon"><Grid /></el-icon>
+          <span>授权审批</span>
+          <span class="header-sub">个人对企业授权应用的申请</span>
+        </div>
+      </template>
+
+      <el-empty v-if="!isAdmin" description="仅租户管理员可访问授权审批" :image-size="80" />
+
+      <div v-else v-loading="loading" class="pending-list">
+        <div v-for="u in pending" :key="u.UserAppUUID" class="pending-row">
+          <div class="app-icon">
+            <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-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-pending-page {
+  padding: 16px;
+  box-sizing: border-box;
+}
+.app-card-wrap {
+  border-radius: 8px;
+}
+.app-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);
+  }
+}
+.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;
+}
+.app-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  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);
+}
+.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);
+}
+.spacer {
+  flex: 1;
+}
+</style>