完善页面7

pages/mall/admin/app/mobile/version.uvue

@@ -1,24 +1,41 @@
+
 <template>
   <view class="admin-page">
-    <view class="admin-card header-card">
-      <view class="title-row">
-        <text class="title">版本管理</text>
-        <button class="btn primary">添加版本</button>
-      </view>
+    <view class="action-bar">
+      <button class="btn primary" @click="handlePublish">发布版本</button>
     </view>
     
     <view class="admin-card content-card">
       <view class="admin-table">
+        <!-- 表头 -->
         <view class="table-header">
-          <text class="cell">版本号</text>
-          <text class="cell">更新内容</text>
-          <text class="cell">强制更新</text>
-          <text class="cell">下载地址</text>
-          <text class="cell">创建时间</text>
-          <text class="cell actions">操作</text>
+          <view class="col col-version"><text>版本号</text></view>
+          <view class="col col-platform"><text>平台类型</text></view>
+          <view class="col col-info"><text>升级信息</text></view>
+          <view class="col col-force"><text>是否强制</text></view>
+          <view class="col col-date"><text>发布日期</text></view>
+          <view class="col col-url"><text>下载地址</text></view>
+          <view class="col col-ops"><text>操作</text></view>
         </view>
-        <view class="table-empty">
-          <text>暂无版本数据</text>
+
+        <!-- 表格内容 -->
+        <view class="table-body">
+          <view v-if="versionList.length === 0" class="table-empty">
+            <text class="empty-txt">暂无数据</text>
+          </view>
+          <view v-for="item in versionList" :key="item.id" class="table-row">
+            <view class="col col-version"><text>{{ item.version }}</text></view>
+            <view class="col col-platform"><text>{{ item.platform }}</text></view>
+            <view class="col col-info"><text>{{ item.info }}</text></view>
+            <view class="col col-force"><text>{{ item.isForce ? '是' : '否' }}</text></view>
+            <view class="col col-date"><text>{{ item.date }}</text></view>
+            <view class="col col-url"><text class="link">{{ item.url }}</text></view>
+            <view class="col col-ops">
+              <text class="op-link" @click="handleEdit(item)">编辑</text>
+              <text class="op-split">|</text>
+              <text class="op-link delete" @click="handleDelete(item)">删除</text>
+            </view>
+          </view>
         </view>
       </view>
     </view>
@@ -26,13 +43,137 @@
 </template>
 
 <script setup lang="uts">
-// 版本管理逻辑
+import { ref } from 'vue'
+
+interface VersionItem {
+  id: number
+  version: string
+  platform: string
+  info: string
+  isForce: boolean
+  date: string
+  url: string
+}
+
+const versionList = ref<VersionItem[]>([])
+
+const handlePublish = () => {
+  uni.showToast({ title: '暂不支持发布', icon: 'none' })
+}
+
+const handleEdit = (item: VersionItem) => {
+  console.log('Edit', item)
+}
+
+const handleDelete = (item: VersionItem) => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除该版本吗？',
+    success: (res) => {
+      if (res.confirm) {
+        uni.showToast({ title: '删除成功', icon: 'success' })
+      }
+    }
+  })
+}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.admin-page {
+  padding: 20px;
+}
+
+.action-bar {
+  margin-bottom: 20px;
+}
+
+.btn.primary {
+  width: 100px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  background: #1890ff !important;
+  color: #fff !important;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+  text-align: center !important;
+  border: none;
+}
+
+.content-card {
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.admin-table {
+  width: 100%;
+}
+
+.table-header {
+  display: flex;
+  flex-direction: row;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.col {
+  padding: 12px 15px;
+  font-size: 14px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  
+  &.col-version { width: 100px; }
+  &.col-platform { width: 120px; }
+  &.col-info { flex: 1; }
+  &.col-force { width: 100px; }
+  &.col-date { width: 150px; }
+  &.col-url { width: 200px; }
+  &.col-ops { width: 120px; justify-content: center; }
+}
+
+.table-header .col {
+  font-weight: bold;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #f0f0f0;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 .table-empty {
-  padding: 100px;
+  padding: 100px 0;
   text-align: center;
-  color: #909399;
+  width: 100%;
+  
+  .empty-txt {
+    font-size: 14px;
+    color: #999;
+  }
+}
+
+.link {
+  color: #1890ff;
+}
+
+.op-link {
+  color: #1890ff;
+  font-size: 14px;
+  cursor: pointer;
+  
+  &.delete {
+    color: #ff4d4f;
+  }
+}
+
+.op-split {
+  margin: 0 8px;
+  color: #e8e8e8;
 }
 </style>
+