style(ui): 统一界面样式标准并优化组件布局

- 引入 ui-standard.scss 样式文件以统一界面标准
- 为查询表单添加 query-form 样式类
- 为搜索按钮组添加 search-buttons 样式类
- 为按钮组容器添加 button-group 样式类
- 为字典标签添加 dict-tag 样式类以统一样式
- 为操作按钮添加 action-button 样式类
- 为分页组件添加 pagination-container 容器
- 优化患者管理页面表格列的字典标签显示
- 调整公告页面布局结构并添加容器样式
- 优化表格单元格间距和样式显示

openhis-ui-vue3/src/assets/styles/index.scss

@@ -6,6 +6,7 @@
 @import './btn.scss';
 @import './openhis.scss';
 @import './font.scss';
+@import './ui-standard.scss';
 
 /* 强制使用鸿蒙字体 */
 * {

openhis-ui-vue3/src/views/inHospitalManagement/charge/register/components/awaitList.vue

@@ -42,13 +42,15 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
     </div>
     <PatientRegister
       v-model="patientRegisterVisible"

openhis-ui-vue3/src/views/monitor/cache/list.vue

@@ -53,6 +53,7 @@
                   type="primary"
                   icon="Delete"
                   @click="handleClearCacheName(scope.row)"
+                  class="action-button"
                 ></el-button>
               </template>
             </el-table-column>
@@ -104,6 +105,7 @@
                   type="primary"
                   icon="Delete"
                   @click="handleClearCacheKey(scope.row)"
+                  class="action-button"
                 ></el-button>
               </template>
             </el-table-column>

openhis-ui-vue3/src/views/monitor/job/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
          <el-form-item label="任务名称" prop="jobName">
             <el-input
                v-model="queryParams.jobName"
@@ -30,13 +30,13 @@
                />
             </el-select>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -93,7 +93,7 @@
          <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
          <el-table-column label="任务组名" align="center" prop="jobGroup">
             <template #default="scope">
-               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
+               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
@@ -111,31 +111,33 @@
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-tooltip content="修改" placement="top">
-                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']" class="action-button"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
-                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']" class="action-button"></el-button>
                </el-tooltip>
                <el-tooltip content="执行一次" placement="top">
-                  <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
+                  <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']" class="action-button"></el-button>
                </el-tooltip>
                <el-tooltip content="任务详细" placement="top">
-                  <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
+                  <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']" class="action-button"></el-button>
                </el-tooltip>
                <el-tooltip content="调度日志" placement="top">
-                  <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
+                  <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']" class="action-button"></el-button>
                </el-tooltip>
             </template>
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
 
       <!-- 添加或修改定时任务对话框 -->
       <el-dialog :title="title" v-model="open" width="820px" append-to-body>

openhis-ui-vue3/src/views/monitor/logininfor/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" class="query-form">
          <el-form-item label="登录地址" prop="ipaddr">
             <el-input
                v-model="queryParams.ipaddr"
@@ -45,13 +45,13 @@
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
             ></el-date-picker>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="danger"
@@ -103,7 +103,7 @@
          <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
          <el-table-column label="登录状态" align="center" prop="status">
             <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
+               <dict-tag :options="sys_common_status" :value="scope.row.status" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
@@ -114,13 +114,15 @@
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
    </div>
 </template>
 

openhis-ui-vue3/src/views/monitor/operlog/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" class="query-form">
          <el-form-item label="操作地址" prop="operIp">
             <el-input
                v-model="queryParams.operIp"
@@ -69,13 +69,13 @@
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
             ></el-date-picker>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="danger"
@@ -113,14 +113,14 @@
          <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
          <el-table-column label="操作类型" align="center" prop="businessType">
             <template #default="scope">
-               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
          <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
          <el-table-column label="操作状态" align="center" prop="status">
             <template #default="scope">
-               <dict-tag :options="sys_common_status" :value="scope.row.status" />
+               <dict-tag :options="sys_common_status" :value="scope.row.status" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
@@ -135,18 +135,20 @@
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
+               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']" class="action-button">详细</el-button>
             </template>
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
 
       <!-- 操作日志详细 -->
       <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>

openhis-ui-vue3/src/views/patientmanagement/patientmanagement/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <!-- 患者添加对话框组件 -->
     <patient-add-dialog ref="patientAddRef" @submit="handlePatientAdded" />
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
       <el-form-item label="病人名称" prop="searchKey">
         <el-input
           v-model="queryParams.searchKey"
@@ -22,43 +22,67 @@
           end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="search-buttons">
         <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="button-group">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="Plus" @click="handleAdd">新增患者</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table :data="patientList" border style="width: 100%">
+    <el-table :data="patientList" border>
       <el-table-column prop="idCard" label="身份证号" width="180" />
       <el-table-column prop="busNo" label="病人ID" width="180" />
       <el-table-column prop="name" label="病人名称" width="180" />
-      <el-table-column prop="genderEnum_enumText" label="性别" width="180" />
+      <el-table-column prop="genderEnum_enumText" label="性别" width="180">
+        <template #default="scope">
+          <dict-tag :options="patient_gender_enum" :value="scope.row.genderEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column
         prop="maritalStatusEnum_enumText"
         label="婚姻状况"
         width="180"
-      /><!--:formatter="formatMaritalStatus"-->
+      >
+        <template #default="scope">
+          <dict-tag :options="marital_status_enum" :value="scope.row.maritalStatusEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="nationalityCode" label="民族" width="180">
         <template #default="scope">
-          {{ nationalityDict(scope.row.nationalityCode) }}
+          <dict-tag :options="nationality_code" :value="scope.row.nationalityCode" class="dict-tag" />
         </template>
       </el-table-column>
       <el-table-column prop="birthDate" label="生日" width="160" />
       <el-table-column prop="phone" label="电话" width="140" />
-      <el-table-column prop="bloodAbo_enumText" label="血型ABO" width="140" />
-      <el-table-column prop="bloodRh_enumText" label="血型RH" width="140" />
+      <el-table-column prop="bloodAbo_enumText" label="血型ABO" width="140">
+        <template #default="scope">
+          <dict-tag :options="blood_abo" :value="scope.row.bloodAbo" class="dict-tag" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="bloodRh_enumText" label="血型RH" width="140">
+        <template #default="scope">
+          <dict-tag :options="blood_rh" :value="scope.row.bloodRh" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="linkName" label="联系人" width="180" />
       <el-table-column prop="linkTelcom" label="联系人电话" width="180" />
-      <el-table-column prop="linkRelationCode_enumText" label="联系人关系" width="180" />
+      <el-table-column prop="linkRelationCode_enumText" label="联系人关系" width="180">
+        <template #default="scope">
+          <dict-tag :options="link_relation_code" :value="scope.row.linkRelationCode" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="address" label="家庭地址" width="180" />
-      <el-table-column prop="prfsEnum_enumText" label="职业" width="180" />
+      <el-table-column prop="prfsEnum_enumText" label="职业" width="180">
+        <template #default="scope">
+          <dict-tag :options="prfs_enum" :value="scope.row.prfsEnum" class="dict-tag" />
+        </template>
+      </el-table-column>
       <el-table-column prop="workCompany" label="工作单位" width="180" />
       <el-table-column prop="organizationName" label="登记医院" width="180" />
       <el-table-column prop="deceasedDate" label="死亡时间" width="180" />
@@ -67,24 +91,23 @@
         label="操作"
         align="center"
         width="210"
-        fixed="right"
         class-name="small-padding fixed-width"
       >  
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-            >修改</el-button
-          >
-          <el-button link type="primary" icon="View" @click="handleSee(scope.row)">查看</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" class="action-button">修改</el-button>
+          <el-button link type="primary" icon="View" @click="handleSee(scope.row)" class="action-button">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <div class="pagination-container">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
@@ -666,4 +689,26 @@ onMounted(() => {
 });
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+// 患者列表页面统一样式
+
+// 优化按钮组间距
+.button-group {
+  margin-bottom: 16px;
+}
+
+// 优化表格样式
+.el-table {
+  // 移除固定宽度，让列自适应
+  :deep(th) {
+    background-color: #f8f9fa;
+    color: #606266;
+    font-weight: 600;
+    padding: 12px 0;
+  }
+
+  :deep(td) {
+    padding: 12px 0;
+  }
+}
+</style>

openhis-ui-vue3/src/views/register.vue

@@ -160,20 +160,26 @@ getCode();
   justify-content: center;
   align-items: center;
   height: 100%;
+  min-height: 100vh;
   background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
 }
+
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  color: #303133;
+  font-size: 24px;
+  font-weight: 500;
 }
 
 .register-form {
-  border-radius: 6px;
+  border-radius: 8px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 30px 30px 20px 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  
   .el-input {
     height: 40px;
     input {
@@ -186,11 +192,13 @@ getCode();
     margin-left: 0px;
   }
 }
+
 .register-tip {
   font-size: 13px;
   text-align: center;
   color: #bfbfbf;
 }
+
 .register-code {
   width: 33%;
   height: 40px;
@@ -198,8 +206,10 @@ getCode();
   img {
     cursor: pointer;
     vertical-align: middle;
+    border-radius: 2px;
   }
 }
+
 .el-register-footer {
   height: 40px;
   line-height: 40px;
@@ -207,13 +217,27 @@ getCode();
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #fff;
-  font-family: Arial;
+  color: #909399;
+  font-family: 'HarmonyOS Sans', Arial, sans-serif;
   font-size: 12px;
   letter-spacing: 1px;
+  background-color: rgba(0, 0, 0, 0.5);
 }
+
 .register-code-img {
   height: 40px;
   padding-left: 12px;
+  border-radius: 2px;
+}
+
+// 链接样式
+.link-type {
+  color: #409eff;
+  text-decoration: none;
+  
+  &:hover {
+    color: #66b1ff;
+    text-decoration: underline;
+  }
 }
 </style>

openhis-ui-vue3/src/views/system/config/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" class="query-form">
          <el-form-item label="参数名称" prop="configName">
             <el-input
                v-model="queryParams.configName"
@@ -20,7 +20,7 @@
             />
          </el-form-item>
          <el-form-item label="系统内置" prop="configType">
-            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
+            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable style="width: 200px">
                <el-option
                   v-for="dict in sys_yes_no"
                   :key="dict.value"
@@ -39,13 +39,13 @@
                end-placeholder="结束日期"
             ></el-date-picker>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -104,7 +104,7 @@
          <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
          <el-table-column label="系统内置" align="center" prop="configType">
             <template #default="scope">
-               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
+               <dict-tag :options="sys_yes_no" :value="scope.row.configType" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
@@ -115,19 +115,21 @@
          </el-table-column>
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" class="action-button">修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']" class="action-button">删除</el-button>
             </template>
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
 
       <!-- 添加或修改参数配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>

openhis-ui-vue3/src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
          <el-form-item label="部门名称" prop="deptName">
             <el-input
                v-model="queryParams.deptName"
@@ -20,13 +20,13 @@
                />
             </el-select>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -59,7 +59,7 @@
          <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
             <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
@@ -69,9 +69,9 @@
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
-               <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" class="action-button">修改</el-button>
+               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" class="action-button">新增</el-button>
+               <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" class="action-button">删除</el-button>
             </template>
          </el-table-column>
       </el-table>

openhis-ui-vue3/src/views/system/dict/data.vue

@@ -5,6 +5,7 @@
       ref="queryRef"
       :inline="true"
       v-show="showSearch"
+      class="query-form"
     >
       <el-form-item label="字典名称" prop="dictType">
         <el-select v-model="queryParams.dictType" style="width: 200px">
@@ -40,7 +41,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="search-buttons">
         <el-button type="primary" icon="Search" @click="handleQuery">
           搜索
         </el-button>
@@ -48,7 +49,7 @@
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="button-group">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -136,7 +137,7 @@
       <el-table-column label="字典排序" align="center" prop="dictSort" />
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" class="dict-tag" />
         </template>
       </el-table-column>
       <el-table-column
@@ -168,6 +169,7 @@
             icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
+            class="action-button"
           >
             修改
           </el-button>
@@ -177,6 +179,7 @@
             icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dict:remove']"
+            class="action-button"
           >
             删除
           </el-button>
@@ -184,13 +187,15 @@
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <div class="pagination-container">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>

openhis-ui-vue3/src/views/system/dict/index.vue

@@ -6,6 +6,7 @@
       :inline="true"
       v-show="showSearch"
       label-width="68px"
+      class="query-form"
     >
       <el-form-item label="字典名称" prop="dictName">
         <el-input
@@ -50,13 +51,13 @@
           end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="search-buttons">
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="button-group">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -134,7 +135,7 @@
       </el-table-column>
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          <dict-tag :options="sys_normal_disable" :value="scope.row.status" class="dict-tag" />
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
@@ -156,7 +157,7 @@
             icon="Edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
-            >修改</el-button
+            class="action-button">修改</el-button
           >
           <el-button
             link
@@ -164,18 +165,20 @@
             icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dict:remove']"
-            >删除</el-button
+            class="action-button">删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <div class="pagination-container">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>

openhis-ui-vue3/src/views/system/menu/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
          <el-form-item label="菜单名称" prop="menuName">
             <el-input
                v-model="queryParams.menuName"
@@ -20,13 +20,13 @@
                />
             </el-select>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -66,7 +66,7 @@
          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="status" label="状态" width="80">
             <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="160" prop="createTime">
@@ -76,9 +76,9 @@
          </el-table-column>
          <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" class="action-button">修改</el-button>
+               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" class="action-button">新增</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" class="action-button">删除</el-button>
             </template>
          </el-table-column>
       </el-table>

openhis-ui-vue3/src/views/system/notice/index.vue

@@ -1,182 +1,194 @@
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="公告标题" prop="noticeTitle">
-            <el-input
-               v-model="queryParams.noticeTitle"
-               placeholder="请输入公告标题"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
+  <div class="app-container notice-container">
+    <div class="components-container">
+      <!-- 查询表单 -->
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
+        <el-form-item label="公告标题" prop="noticeTitle">
+          <el-input
+            v-model="queryParams.noticeTitle"
+            placeholder="请输入公告标题"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="操作人员" prop="createBy">
+          <el-input
+            v-model="queryParams.createBy"
+            placeholder="请输入操作人员"
+            clearable
+            @keyup.enter="handleQuery"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="类型" prop="noticeType">
+          <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
+            <el-option
+              v-for="dict in sys_notice_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
             />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="createBy">
-            <el-input
-               v-model="queryParams.createBy"
-               placeholder="请输入操作人员"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="类型" prop="noticeType">
-            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
-               <el-option
+          </el-select>
+        </el-form-item>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 操作按钮组 -->
+      <el-row :gutter="10" class="button-group">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="Plus"
+            @click="handleAdd"
+            v-hasPermi="['system:notice:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
+            icon="Edit"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['system:notice:edit']"
+          >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            plain
+            icon="Delete"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['system:notice:remove']"
+          >删除</el-button>
+        </el-col>
+        <el-col :span="1.5" :xs="24">
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-col>
+      </el-row>
+
+      <!-- 数据表格 -->
+      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange" border>
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" align="center" prop="noticeId" width="80" />
+        <el-table-column
+          label="公告标题"
+          align="center"
+          prop="noticeTitle"
+          min-width="200"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" class="dict-tag" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status" width="90">
+          <template #default="scope">
+            <dict-tag :options="sys_notice_status" :value="scope.row.status" class="dict-tag" />
+          </template>
+        </el-table-column>
+        <el-table-column label="发布状态" align="center" prop="publishStatus" width="90">
+          <template #default="scope">
+            <el-tag v-if="scope.row.publishStatus === '1'" type="success">已发布</el-tag>
+            <el-tag v-else type="info">未发布</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建者" align="center" prop="createBy" width="90" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="110">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="280">
+          <template #default="scope">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']" class="action-button">修改</el-button>
+            <el-button
+              v-if="scope.row.publishStatus !== '1'"
+              link type="success"
+              icon="Promotion"
+              @click="handlePublish(scope.row)"
+              v-hasPermi="['system:notice:edit']"
+              class="action-button"
+            >发布</el-button>
+            <el-button
+              v-else
+              link type="warning"
+              icon="RemoveFilled"
+              @click="handleUnpublish(scope.row)"
+              v-hasPermi="['system:notice:edit']"
+              class="action-button"
+            >取消发布</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" class="action-button">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog :title="title" v-model="open" width="780px" destroy-on-close>
+      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select v-model="form.noticeType" placeholder="请选择">
+                <el-option
                   v-for="dict in sys_notice_type"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in sys_notice_status"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.noticeContent" :min-height="192"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:notice:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:notice:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:notice:remove']"
-            >删除</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="序号" align="center" prop="noticeId" width="80" />
-         <el-table-column
-            label="公告标题"
-            align="center"
-            prop="noticeTitle"
-            min-width="200"
-            :show-overflow-tooltip="true"
-         />
-         <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="状态" align="center" prop="status" width="90">
-            <template #default="scope">
-               <dict-tag :options="sys_notice_status" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="发布状态" align="center" prop="publishStatus" width="90">
-            <template #default="scope">
-               <el-tag v-if="scope.row.publishStatus === '1'" type="success">已发布</el-tag>
-               <el-tag v-else type="info">未发布</el-tag>
-            </template>
-         </el-table-column>
-         <el-table-column label="创建者" align="center" prop="createBy" width="90" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="110">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="280">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
-               <el-button
-                  v-if="scope.row.publishStatus !== '1'"
-                  link type="success"
-                  icon="Promotion"
-                  @click="handlePublish(scope.row)"
-                  v-hasPermi="['system:notice:edit']"
-               >发布</el-button>
-               <el-button
-                  v-else
-                  link type="warning"
-                  icon="RemoveFilled"
-                  @click="handleUnpublish(scope.row)"
-                  v-hasPermi="['system:notice:edit']"
-               >取消发布</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改公告对话框 -->
-      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
-         <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
-            <el-row>
-               <el-col :span="12">
-                  <el-form-item label="公告标题" prop="noticeTitle">
-                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="公告类型" prop="noticeType">
-                     <el-select v-model="form.noticeType" placeholder="请选择">
-                        <el-option
-                           v-for="dict in sys_notice_type"
-                           :key="dict.value"
-                           :label="dict.label"
-                           :value="dict.value"
-                        ></el-option>
-                     </el-select>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="状态">
-                     <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_notice_status"
-                           :key="dict.value"
-                           :label="dict.value"
-                        >{{ dict.label }}</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="内容">
-                    <editor v-model="form.noticeContent" :min-height="192"/>
-                  </el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup name="Notice">
@@ -323,3 +335,10 @@ function handleUnpublish(row) {
 
 getList();
 </script>
+
+<style lang="scss" scoped>
+.notice-container {
+  background-color: #f0f2f5;
+  min-height: calc(100vh - 84px);
+}
+</style>

openhis-ui-vue3/src/views/system/post/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="query-form">
          <el-form-item label="岗位编码" prop="postCode">
             <el-input
                v-model="queryParams.postCode"
@@ -29,13 +29,13 @@
                />
             </el-select>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -85,7 +85,7 @@
          <el-table-column label="岗位排序" align="center" prop="postSort" />
          <el-table-column label="状态" align="center" prop="status">
             <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               <dict-tag :options="sys_normal_disable" :value="scope.row.status" class="dict-tag" />
             </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -95,19 +95,21 @@
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
+               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']" class="action-button">修改</el-button>
+               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']" class="action-button">删除</el-button>
             </template>
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
 
       <!-- 添加或修改岗位对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>

openhis-ui-vue3/src/views/system/role/index.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px" class="query-form">
          <el-form-item label="角色名称" prop="roleName">
             <el-input
                v-model="queryParams.roleName"
@@ -44,12 +44,12 @@
                end-placeholder="结束日期"
             ></el-date-picker>
          </el-form-item>
-         <el-form-item>
+         <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="button-group">
          <el-col :span="1.5">
             <el-button
                type="primary"
@@ -116,28 +116,30 @@
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
               <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']" class="action-button"></el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']" class="action-button"></el-button>
               </el-tooltip>
               <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']" class="action-button"></el-button>
               </el-tooltip>
               <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']" class="action-button"></el-button>
               </el-tooltip>
             </template>
          </el-table-column>
       </el-table>
 
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
+      <div class="pagination-container">
+        <pagination
+           v-show="total > 0"
+           :total="total"
+           v-model:page="queryParams.pageNum"
+           v-model:limit="queryParams.pageSize"
+           @pagination="getList"
+        />
+      </div>
 
       <!-- 添加或修改角色配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>

openhis-ui-vue3/src/views/system/user/index.vue

@@ -34,6 +34,7 @@
           :inline="true"
           v-show="showSearch"
           label-width="68px"
+          class="query-form"
         >
           <el-form-item label="用户账号" prop="searchKey">
             <el-input
@@ -68,13 +69,13 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item>
+          <el-form-item class="search-buttons">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
+        <el-row :gutter="10" class="button-group">
           <el-col :span="1.5">
             <el-button
               type="primary"
@@ -208,6 +209,7 @@
                   icon="Edit"
                   @click="handleUpdate(scope.row)"
                   v-hasPermi="['system:user:edit']"
+                  class="action-button"
                 ></el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
@@ -217,6 +219,7 @@
                   icon="Delete"
                   @click="handleDelete(scope.row)"
                   v-hasPermi="['system:user:remove']"
+                  class="action-button"
                 ></el-button>
               </el-tooltip>
               <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
@@ -226,6 +229,7 @@
                   icon="Key"
                   @click="handleResetPwd(scope.row)"
                   v-hasPermi="['system:user:resetPwd']"
+                  class="action-button"
                 ></el-button>
               </el-tooltip>
               <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
@@ -235,18 +239,21 @@
                   icon="CircleCheck"
                   @click="handleAuthRole(scope.row)"
                   v-hasPermi="['system:user:edit']"
+                  class="action-button"
                 ></el-button>
               </el-tooltip>
             </template>
           </el-table-column>
         </el-table>
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          v-model:page="queryParams.pageNo"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-        />
+        <div class="pagination-container">
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
       </el-col>
     </el-row>