From 8beb280aad5c9f6efdfd4f65afd84a12418c8ac4 Mon Sep 17 00:00:00 2001
From: TermiNexus <wyt18222152539wyt@163.com>
Date: Mon, 5 Oct 2026 18:24:37 +0800
Subject: [PATCH] =?UTF-8?q?style(Venom):=20=E4=BC=98=E5=8C=96=E5=8C=85?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=99=A8=E5=AE=9A=E5=88=B6=E9=A1=B5=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增品牌/概览区（软件包数、版本发布数）与工具条，列表改用卡片 + 包头像/说明双行单元格

- 配置视图改为 包信息头 + 配置/发布双栏卡片 + 发布历史卡片，表单改 label 顶置

- 全部配色走 Element Plus CSS 变量，自动适配宿主明/暗主题；引入 @element-plus/icons-vue
---
 GVSDServiceServer/venom_ui/package-lock.json |   1 +
 GVSDServiceServer/venom_ui/package.json      |   1 +
 GVSDServiceServer/venom_ui/src/App.vue       | 427 +++++++++++++++----
 3 files changed, 336 insertions(+), 93 deletions(-)

diff --git a/GVSDServiceServer/venom_ui/package-lock.json b/GVSDServiceServer/venom_ui/package-lock.json
index 5734a16e..6099b58c 100644
--- a/GVSDServiceServer/venom_ui/package-lock.json
+++ b/GVSDServiceServer/venom_ui/package-lock.json
@@ -8,6 +8,7 @@
       "name": "venom-ui",
       "version": "1.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.2",
         "element-plus": "^2.14.3",
         "vue": "^3.5.40"
       },
diff --git a/GVSDServiceServer/venom_ui/package.json b/GVSDServiceServer/venom_ui/package.json
index dfc84679..6a31695d 100644
--- a/GVSDServiceServer/venom_ui/package.json
+++ b/GVSDServiceServer/venom_ui/package.json
@@ -8,6 +8,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "element-plus": "^2.14.3",
     "vue": "^3.5.40"
   },
diff --git a/GVSDServiceServer/venom_ui/src/App.vue b/GVSDServiceServer/venom_ui/src/App.vue
index c80f6b15..c8576925 100644
--- a/GVSDServiceServer/venom_ui/src/App.vue
+++ b/GVSDServiceServer/venom_ui/src/App.vue
@@ -6,9 +6,22 @@
  * 配置视图：编辑包说明/配置内容、发布新版本、查看发布历史
  *
  * 视图切换在组件内部完成（不占用宿主路由），符合「远端页面自理」的微前端约定。
+ * 样式仅依赖 Element Plus 的 CSS 变量，自动适配宿主明/暗主题。
  */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
+import {
+  ArrowLeft,
+  Box,
+  Clock,
+  Collection,
+  Finished,
+  Plus,
+  Promotion,
+  Refresh,
+  Search,
+  User,
+} from '@element-plus/icons-vue'
 import {
   venomApi,
   type RemoteContext,
@@ -37,6 +50,11 @@ const createForm = reactive({ PackageName: '', PackageDesc: '', ConfigText: '' }
 const configForm = reactive({ PackageDesc: '', ConfigText: '' })
 const releaseForm = reactive({ Version: '', Notes: '' })
 
+/** 全部软件包的发布次数合计（列表概览用） */
+const totalReleases = computed(() =>
+  packages.value.reduce((sum, p) => sum + (p.ReleaseCount || 0), 0),
+)
+
 async function loadPackages(): Promise<void> {
   loading.value = true
   try {
@@ -158,119 +176,204 @@ onMounted(loadPackages)
   <div class="venom-page">
     <!-- ==================== 列表视图 ==================== -->
     <template v-if="!openedUUID">
-      <div class="head">
-        <div class="brand">
-          <span class="brand-name">这是Venom</span>
-          <span class="brand-sub">Venom 包管理器 · 软件包列表</span>
+      <!-- 品牌 / 概览 -->
+      <div class="venom-hero">
+        <div class="hero-badge"><el-icon :size="26"><Box /></el-icon></div>
+        <div class="hero-text">
+          <div class="hero-title">这是Venom</div>
+          <div class="hero-sub">Venom 包管理器 · 软件包仓库（包名全局唯一）</div>
         </div>
-        <div class="spacer" />
+        <div class="hero-stats">
+          <div class="stat">
+            <div class="stat-value">{{ packages.length }}</div>
+            <div class="stat-label">软件包</div>
+          </div>
+          <div class="stat-divider" />
+          <div class="stat">
+            <div class="stat-value">{{ totalReleases }}</div>
+            <div class="stat-label">版本发布</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 工具条 -->
+      <div class="toolbar">
         <el-input
           v-model="keyword"
           placeholder="按包名搜索"
           clearable
           class="search"
+          :prefix-icon="Search"
           @keyup.enter="loadPackages"
           @clear="loadPackages"
         />
-        <el-button @click="loadPackages">刷新</el-button>
-        <el-button type="primary" @click="openCreate">新建软件包</el-button>
+        <div class="spacer" />
+        <el-button :icon="Refresh" round @click="loadPackages">刷新</el-button>
+        <el-button type="primary" :icon="Plus" round @click="openCreate">新建软件包</el-button>
       </div>
 
-      <el-table v-loading="loading" :data="packages" border size="default" class="table">
-        <el-table-column prop="PackageName" label="包名" min-width="180" show-overflow-tooltip>
-          <template #default="{ row }">
-            <span class="pkg-name">{{ row.PackageName }}</span>
+      <!-- 包列表 -->
+      <el-card shadow="never" class="panel">
+        <el-table v-loading="loading" :data="packages" class="table" row-key="PackageUUID">
+          <el-table-column label="软件包" min-width="260">
+            <template #default="{ row }">
+              <div class="pkg-cell">
+                <div class="pkg-avatar"><el-icon><Collection /></el-icon></div>
+                <div class="pkg-meta">
+                  <div class="pkg-name">{{ row.PackageName }}</div>
+                  <div class="pkg-desc">{{ row.PackageDesc || '—' }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建人" width="150">
+            <template #default="{ row }">
+              <span class="muted">{{ row.CreatorName || '—' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="CreateTime" label="创建时间" width="180" />
+          <el-table-column label="版本" width="110" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.ReleaseCount ? 'success' : 'info'" effect="plain" round size="small">
+                {{ row.ReleaseCount || 0 }} 个
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="130" fixed="right" align="right">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="openConfig(row)">打开配置</el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty description="还没有软件包" :image-size="90">
+              <el-button type="primary" :icon="Plus" round @click="openCreate">新建软件包</el-button>
+            </el-empty>
           </template>
-        </el-table-column>
-        <el-table-column prop="PackageDesc" label="说明" min-width="220" show-overflow-tooltip />
-        <el-table-column prop="CreatorName" label="创建人" width="140" show-overflow-tooltip />
-        <el-table-column prop="CreateTime" label="创建时间" width="180" />
-        <el-table-column prop="ReleaseCount" label="发布数" width="90" align="center" />
-        <el-table-column label="操作" width="130" fixed="right">
-          <template #default="{ row }">
-            <el-button link type="primary" @click="openConfig(row)">打开配置</el-button>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="还没有软件包，点右上角「新建软件包」开始" :image-size="80" />
-        </template>
-      </el-table>
+        </el-table>
+      </el-card>
     </template>
 
     <!-- ==================== 配置视图 ==================== -->
     <template v-else>
-      <div class="head">
-        <el-button link @click="backToList">← 返回列表</el-button>
-        <div class="brand">
-          <span class="brand-name">{{ detail?.PackageName || '' }}</span>
-          <span class="brand-sub">包配置</span>
+      <!-- 包信息头 -->
+      <div class="detail-head">
+        <el-button :icon="ArrowLeft" text @click="backToList">返回列表</el-button>
+        <div class="detail-title">
+          <div class="pkg-avatar lg"><el-icon :size="18"><Box /></el-icon></div>
+          <span class="detail-name">{{ detail?.PackageName || '' }}</span>
+        </div>
+        <div class="detail-tags">
+          <el-tag type="success" effect="plain" round size="small">
+            <el-icon><Finished /></el-icon>发布 {{ detail?.ReleaseCount || 0 }} 次
+          </el-tag>
+          <el-tag v-if="detail?.CreatorName" effect="plain" round size="small">
+            <el-icon><User /></el-icon>{{ detail?.CreatorName }}
+          </el-tag>
+          <el-tag v-if="detail?.UpdateTime" effect="plain" round size="small">
+            <el-icon><Clock /></el-icon>{{ detail?.UpdateTime }}
+          </el-tag>
         </div>
-        <div class="spacer" />
-        <el-tag size="small" effect="plain">发布 {{ detail?.ReleaseCount || 0 }} 次</el-tag>
       </div>
 
-      <el-divider content-position="left">包配置</el-divider>
-      <el-form label-width="96px" class="form">
-        <el-form-item label="包名">
-          <el-input :model-value="detail?.PackageName || ''" disabled />
-        </el-form-item>
-        <el-form-item label="包说明">
-          <el-input v-model="configForm.PackageDesc" maxlength="512" placeholder="可选" />
-        </el-form-item>
-        <el-form-item label="配置内容">
-          <el-input
-            v-model="configForm.ConfigText"
-            type="textarea"
-            :rows="6"
-            placeholder="包配置内容（如依赖、构建参数等）"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="saving" @click="saveConfig">保存配置</el-button>
-        </el-form-item>
-      </el-form>
+      <div class="detail-grid">
+        <!-- 包配置 -->
+        <el-card shadow="never" class="panel">
+          <template #header>
+            <div class="panel-head">
+              <el-icon><Collection /></el-icon>
+              <span>包配置</span>
+            </div>
+          </template>
+          <el-form label-position="top" class="form">
+            <el-form-item label="包名">
+              <el-input :model-value="detail?.PackageName || ''" disabled />
+            </el-form-item>
+            <el-form-item label="包说明">
+              <el-input v-model="configForm.PackageDesc" maxlength="512" placeholder="可选" show-word-limit />
+            </el-form-item>
+            <el-form-item label="配置内容">
+              <el-input
+                v-model="configForm.ConfigText"
+                type="textarea"
+                :rows="7"
+                placeholder="包配置内容（如依赖、构建参数等）"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" round :loading="saving" @click="saveConfig">保存配置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
 
-      <el-divider content-position="left">发布新版本</el-divider>
-      <el-form label-width="96px" class="form">
-        <el-form-item label="版本号">
-          <el-input v-model="releaseForm.Version" maxlength="64" placeholder="如 1.0.0" class="version" />
-        </el-form-item>
-        <el-form-item label="发布说明">
-          <el-input v-model="releaseForm.Notes" type="textarea" :rows="3" placeholder="可选" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="success" :loading="publishing" @click="publishRelease">发布</el-button>
-        </el-form-item>
-      </el-form>
+        <!-- 发布新版本 -->
+        <el-card shadow="never" class="panel">
+          <template #header>
+            <div class="panel-head">
+              <el-icon><Promotion /></el-icon>
+              <span>发布新版本</span>
+            </div>
+          </template>
+          <el-form label-position="top" class="form">
+            <el-form-item label="版本号">
+              <el-input v-model="releaseForm.Version" maxlength="64" placeholder="如 1.0.0" />
+            </el-form-item>
+            <el-form-item label="发布说明">
+              <el-input v-model="releaseForm.Notes" type="textarea" :rows="7" placeholder="可选" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="success" round :icon="Promotion" :loading="publishing" @click="publishRelease">
+                发布
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
 
-      <el-divider content-position="left">发布历史</el-divider>
-      <el-table :data="releases" border size="small" class="table">
-        <el-table-column prop="Version" label="版本" width="140" />
-        <el-table-column prop="PublisherName" label="发布人" width="150" show-overflow-tooltip />
-        <el-table-column prop="CreateTime" label="发布时间" width="180" />
-        <el-table-column prop="Notes" label="发布说明" min-width="200" show-overflow-tooltip />
-        <template #empty>
-          <el-empty description="暂无发布记录" :image-size="60" />
+      <!-- 发布历史 -->
+      <el-card shadow="never" class="panel">
+        <template #header>
+          <div class="panel-head">
+            <el-icon><Clock /></el-icon>
+            <span>发布历史</span>
+            <el-tag class="panel-count" effect="plain" round size="small">{{ releases.length }}</el-tag>
+          </div>
         </template>
-      </el-table>
+        <el-table :data="releases" class="table" row-key="ReleaseUUID">
+          <el-table-column label="版本" width="150">
+            <template #default="{ row }">
+              <el-tag effect="plain" round size="small">{{ row.Version }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布人" width="160">
+            <template #default="{ row }">
+              <span class="muted">{{ row.PublisherName || '—' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="CreateTime" label="发布时间" width="180" />
+          <el-table-column prop="Notes" label="发布说明" min-width="200" show-overflow-tooltip />
+          <template #empty>
+            <el-empty description="暂无发布记录" :image-size="70" />
+          </template>
+        </el-table>
+      </el-card>
     </template>
 
     <!-- ==================== 新建软件包 ==================== -->
     <el-dialog v-model="dialogVisible" title="新建软件包" width="620px" :close-on-click-modal="false">
-      <el-form label-width="96px">
+      <el-form label-position="top" class="form">
         <el-form-item label="包名" required>
           <el-input v-model="createForm.PackageName" maxlength="128" placeholder="包名必须全局唯一" />
         </el-form-item>
         <el-form-item label="包说明">
-          <el-input v-model="createForm.PackageDesc" maxlength="512" placeholder="可选" />
+          <el-input v-model="createForm.PackageDesc" maxlength="512" placeholder="可选" show-word-limit />
         </el-form-item>
         <el-form-item label="配置内容">
           <el-input v-model="createForm.ConfigText" type="textarea" :rows="5" placeholder="可选" />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="submitCreate">创建</el-button>
+        <el-button round @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" round :loading="saving" @click="submitCreate">创建</el-button>
       </template>
     </el-dialog>
   </div>
@@ -280,43 +383,181 @@ onMounted(loadPackages)
 .venom-page {
   padding: 4px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
-.head {
+
+/* ==== 品牌 / 概览 ==== */
+.venom-hero {
   display: flex;
   align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
+  gap: 14px;
+  padding: 16px 18px;
+  border-radius: 12px;
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-7);
 }
-.brand {
+.hero-badge {
+  width: 46px;
+  height: 46px;
+  flex-shrink: 0;
   display: flex;
-  align-items: baseline;
-  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
+  box-shadow: 0 4px 12px var(--el-color-primary-light-5);
 }
-.brand-name {
-  font-size: 16px;
+.hero-text {
+  min-width: 0;
+}
+.hero-title {
+  font-size: 18px;
   font-weight: 700;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.5px;
 }
-.brand-sub {
+.hero-sub {
+  margin-top: 2px;
   font-size: 12px;
   color: var(--el-text-color-secondary);
 }
+.hero-stats {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.stat {
+  text-align: center;
+}
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--el-color-primary);
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.stat-divider {
+  width: 1px;
+  height: 28px;
+  background: var(--el-border-color);
+}
+
+/* ==== 工具条 ==== */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.search {
+  width: 260px;
+}
 .spacer {
   flex: 1;
 }
-.search {
-  width: 220px;
+
+/* ==== 面板 ==== */
+.panel {
+  border-radius: 12px;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.panel-count {
+  margin-left: 4px;
 }
 .table {
   width: 100%;
 }
-.form {
-  max-width: 720px;
+
+/* ==== 包单元格 ==== */
+.pkg-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
 }
-.version {
-  width: 220px;
+.pkg-avatar {
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border: 1px solid var(--el-color-primary-light-8);
+}
+.pkg-avatar.lg {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+}
+.pkg-meta {
+  min-width: 0;
 }
 .pkg-name {
   font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.pkg-desc {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.muted {
+  color: var(--el-text-color-secondary);
+}
+
+/* ==== 配置视图 ==== */
+.detail-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.detail-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.detail-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+.detail-tags {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.detail-tags .el-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 14px;
+}
+.form {
+  max-width: 100%;
 }
 </style>