From 640a3ecc5731612eb9cb3e79dc71801c0114c626 Mon Sep 17 00:00:00 2001
From: TongTongStudio <tongtongstudios@gmail.com>
Date: Sun, 16 Aug 2026 04:50:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(app-manager):=20=E4=BC=98=E5=8C=96=E5=AE=89?=
 =?UTF-8?q?=E8=A3=85=E5=8C=85=E4=B8=8A=E4=BC=A0=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81=E5=92=8C=E6=9D=83=E9=99=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将空状态移至加载容器外，避免加载时闪现空提示
- 将安装包详情抽屉宽度调整为 800px
- 权限列表从标签改为带序号的列表，并优化换行与滚动样式
---
 .../app-manager/upload-package/index.vue      | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/views/app-manager/upload-package/index.vue b/src/views/app-manager/upload-package/index.vue
index 70dddd97..e64ad09a 100644
--- a/src/views/app-manager/upload-package/index.vue
+++ b/src/views/app-manager/upload-package/index.vue
@@ -31,10 +31,14 @@
       <el-button type="success" :icon="Upload" @click="uploadVisible = true">上传安装包</el-button>
     </div>
 
-    <!-- 卡片列表 -->
-    <div v-loading="loading" class="card-grid">
-      <el-empty v-if="!loading && list.length === 0" description="暂无安装包，点击右上角上传" />
+    <!-- 卡片列表 / 空状态 -->
+    <el-empty
+      v-if="!loading && list.length === 0"
+      description="暂无安装包，点击右上角上传"
+      class="empty-state"
+    />
 
+    <div v-else v-loading="loading" class="card-grid">
       <el-card v-for="item in list" :key="item.id" class="pkg-card" shadow="hover">
         <div class="pkg-card__header">
           <el-image
@@ -136,7 +140,7 @@
     <UploadDialog v-model:visible="uploadVisible" @success="handleUploaded" />
 
     <!-- 详情抽屉 -->
-    <el-drawer v-model="detailVisible" title="安装包详情" size="460px">
+    <el-drawer v-model="detailVisible" title="安装包详情" size="800px">
       <el-descriptions v-if="current" :column="1" border class="detail-desc">
         <el-descriptions-item label="应用名称">{{ current.appLabel || "-" }}</el-descriptions-item>
         <el-descriptions-item label="包名">{{ current.packageName || "-" }}</el-descriptions-item>
@@ -210,15 +214,10 @@
         <el-descriptions-item label="备注">{{ current.remark || "-" }}</el-descriptions-item>
         <el-descriptions-item label="权限列表">
           <div class="perm-list">
-            <el-tag
-              v-for="p in current.permissions || []"
-              :key="p"
-              size="small"
-              type="info"
-              class="perm-tag"
-            >
-              {{ p }}
-            </el-tag>
+            <div v-for="(p, i) in current.permissions || []" :key="p" class="perm-item">
+              <span class="perm-index">{{ i + 1 }}.</span>
+              <span class="perm-name">{{ p }}</span>
+            </div>
             <span v-if="!current.permissions || current.permissions.length === 0">-</span>
           </div>
         </el-descriptions-item>
@@ -423,6 +422,12 @@ onMounted(() => {
   }
 }
 
+.empty-state {
+  display: flex;
+  justify-content: center;
+  min-height: 300px;
+}
+
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
@@ -539,11 +544,28 @@ onMounted(() => {
 }
 
 .perm-list {
-  max-height: 160px;
+  max-height: 240px;
   overflow-y: auto;
 
-  .perm-tag {
-    margin: 0 4px 4px 0;
+  .perm-item {
+    display: flex;
+    gap: 6px;
+    align-items: baseline;
+    padding: 2px 0;
+    line-height: 20px;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  .perm-index {
+    flex-shrink: 0;
+    color: var(--el-text-color-secondary);
+  }
+
+  .perm-name {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 }