首页细节调整

pages/mall/admin/user/grouping/index.uvue

@@ -1,78 +1,78 @@
-<template>
+<template>
   <view class="user-group-page">
     <view class="content-card">
-      <!-- 鎿嶄綔鎸夐挳琛?-->
+      <!-- 操作按钮行 -->
       <view class="action-bar">
-        <button class="btn primary small" @click="onAddGroup">娣诲姞鍒嗙粍</button>
+        <button class="btn primary small" @click="onAddGroup">添加分组</button>
       </view>
 
-      <!-- 鍒嗙粍鍒楄〃琛ㄦ牸 -->
+      <!-- 分组列表表格 -->
       <view class="table-container">
-        <!-- 琛ㄥご -->
+        <!-- 表头 -->
         <view class="table-header">
           <view class="col col-id"><text>ID</text></view>
-          <view class="col col-name"><text>鍒嗙粍</text></view>
-          <view class="col col-ops"><text>鎿嶄綔</text></view>
+          <view class="col col-name"><text>分组</text></view>
+          <view class="col col-ops"><text>操作</text></view>
         </view>
 
-        <!-- 琛ㄦ牸鍐呭 -->
+        <!-- 表格内容 -->
         <view class="table-body">
           <view v-for="group in groupList" :key="group.id" class="table-row">
             <view class="col col-id"><text>{{ group.id }}</text></view>
             <view class="col col-name"><text>{{ group.name }}</text></view>
             <view class="col col-ops">
-              <text class="op-link" @click="onEditGroup(group)">淇敼</text>
+              <text class="op-link" @click="onEditGroup(group)">修改</text>
               <view class="op-divider">|</view>
-              <text class="op-link" @click="onDeleteGroup(group)">鍒犻櫎</text>
+              <text class="op-link" @click="onDeleteGroup(group)">删除</text>
             </view>
           </view>
         </view>
       </view>
 
-      <!-- 鍒嗛〉鍖哄煙 -->
+      <!-- 分页区域 -->
       <view class="pagination-row">
-        <text class="total-text">鍏?{{ groupList.length }} 鏉?/text>
+        <text class="total-text">共 {{ groupList.length }} 条</text>
         <view class="page-size-selector">
-          <text>15鏉?椤?/text>
-          <text class="arrow">鈻?/text>
+          <text>15条/页</text>
+          <text class="arrow">▼</text>
         </view>
         <view class="page-btns">
-          <view class="page-btn disabled"><text>鈥?/text></view>
+          <view class="page-btn disabled"><text>‹</text></view>
           <view class="page-btn active"><text>1</text></view>
-          <view class="page-btn disabled"><text>鈥?/text></view>
+          <view class="page-btn disabled"><text>›</text></view>
         </view>
         <view class="page-jump">
-          <text>鍓嶅線</text>
+          <text>前往</text>
           <input class="jump-input" value="1" />
-          <text>椤?/text>
+          <text>页</text>
         </view>
       </view>
     </view>
 
-    <!-- 娣诲姞/淇敼鍒嗙粍寮圭獥 -->
+    <!-- 添加/修改分组弹窗 -->
     <view class="modal-mask" v-if="showModal" @click="closeModal">
       <view class="modal-content" @click.stop>
         <view class="modal-header">
           <text class="modal-title">{{ modalTitle }}</text>
-          <text class="modal-close" @click="closeModal">脳</text>
+          <text class="modal-close" @click="closeModal">×</text>
         </view>
         <view class="modal-body">
           <view class="form-item">
             <view class="label-box">
               <text class="required">*</text>
-              <text class="label">鍒嗙粍鍚嶇О锛?/text>
+              <text class="label">分组名称：</text>
             </view>
             <input 
               class="form-input" 
               v-model="formData.name" 
-              placeholder="璇疯緭鍏ュ垎缁勫悕绉? 
+              placeholder="请输入分组名称" 
               autofocus
             />
           </view>
         </view>
         <view class="modal-footer">
-          <button class="btn ghost" @click="closeModal">鍙栨秷</button>
-          <button class="btn primary" @click="submitForm">纭畾</button>
+          <button class="btn ghost" @click="closeModal">取消</button>
+          <button class="btn primary" @click="submitForm">确定</button>
         </view>
       </view>
     </view>
@@ -82,26 +82,26 @@
 <script setup lang="uts">
 import { ref, reactive, computed } from 'vue'
 
-// 鍒嗙粍鏁版嵁
+// 分组数据
 const groupList = ref([
-  { id: 251, name: 'A绫诲鎴? },
-  { id: 252, name: 'B绫诲鎴? },
-  { id: 253, name: 'C绫诲鎴? },
-  { id: 254, name: 'D绫诲鎴? }
+  { id: 251, name: 'A类客户' },
+  { id: 252, name: 'B类客户' },
+  { id: 253, name: 'C类客户' },
+  { id: 254, name: 'D类客户' }
 ])
 
-// 寮圭獥鐘舵€?
+// 弹窗状态
 const showModal = ref(false)
 const isEdit = ref(false)
-const modalTitle = computed(() => isEdit.value ? '淇敼鍒嗙粍' : '娣诲姞鍒嗙粍')
+const modalTitle = computed(() => isEdit.value ? '修改分组' : '添加分组')
 
-// 琛ㄥ崟鏁版嵁
+// 表单数据
 const formData = reactive({
   id: 0,
   name: ''
 })
 
-// 娣诲姞鍒嗙粍
+// 添加分组
 function onAddGroup() {
   isEdit.value = false
   formData.id = 0
@@ -109,7 +109,7 @@ function onAddGroup() {
   showModal.value = true
 }
 
-// 淇敼鍒嗙粍
+// 修改分组
 function onEditGroup(group: any) {
   isEdit.value = true
   formData.id = group.id
@@ -117,47 +117,47 @@ function onEditGroup(group: any) {
   showModal.value = true
 }
 
-// 鍒犻櫎鍒嗙粍
+// 删除分组
 function onDeleteGroup(group: any) {
   uni.showModal({
-    title: '鎻愮ず',
-    content: '纭畾瑕佸垹闄よ鍒嗙粍鍚楋紵',
+    title: '提示',
+    content: '确定要删除该分组吗？',
     success: (res) => {
       if (res.confirm) {
         groupList.value = groupList.value.filter(item => item.id !== group.id)
-        uni.showToast({ title: '鍒犻櫎鎴愬姛', icon: 'success' })
+        uni.showToast({ title: '删除成功', icon: 'success' })
       }
     }
   })
 }
 
-// 鍏抽棴寮圭獥
+// 关闭弹窗
 function closeModal() {
   showModal.value = false
 }
 
-// 鎻愪氦琛ㄥ崟
+// 提交表单
 function submitForm() {
   if (!formData.name) {
-    uni.showToast({ title: '璇疯緭鍏ュ垎缁勫悕绉?, icon: 'none' })
+    uni.showToast({ title: '请输入分组名称', icon: 'none' })
     return
   }
   
   if (isEdit.value) {
-    // 妯℃嫙淇敼
+    // 模拟修改
     const index = groupList.value.findIndex(item => item.id === formData.id)
     if (index > -1) {
       groupList.value[index].name = formData.name
     }
-    uni.showToast({ title: '淇敼鎴愬姛', icon: 'success' })
+    uni.showToast({ title: '修改成功', icon: 'success' })
   } else {
-    // 妯℃嫙娣诲姞
+    // 模拟添加
     const newId = groupList.value.length > 0 ? Math.max(...groupList.value.map(g => g.id)) + 1 : 1
     groupList.value.push({
       id: newId,
       name: formData.name
     })
-    uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
+    uni.showToast({ title: '添加成功', icon: 'success' })
   }
   
   closeModal()
@@ -166,9 +166,9 @@ function submitForm() {
 
 <style scoped lang="scss">
 .user-group-page {
-  /* padding removed */
-  
-  
+  padding: 16px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
 }
 
 .content-card {
@@ -183,7 +183,7 @@ function submitForm() {
   flex-direction: row;
 }
 
-/* 鎸夐挳鏍峰紡 */
+/* 按钮样式 */
 .btn {
   height: 32px;
   line-height: 32px;
@@ -219,7 +219,7 @@ function submitForm() {
   padding: 0 12px;
 }
 
-/* 琛ㄦ牸鏍峰紡 */
+/* 表格样式 */
 .table-container {
   border: 1px solid #f0f0f0;
   border-radius: 2px;
@@ -291,7 +291,7 @@ function submitForm() {
   opacity: 0.5;
 }
 
-/* 鍒嗛〉鏍峰紡 */
+/* 分页样式 */
 .pagination-row {
   margin-top: 24px;
   display: flex;
@@ -368,7 +368,7 @@ function submitForm() {
   }
 }
 
-/* 寮圭獥鏍峰紡 */
+/* 弹窗样式 */
 .modal-mask {
   position: fixed;
   top: 0;
@@ -462,4 +462,3 @@ function submitForm() {
   gap: 8px;
 }
 </style>
-