车辆管理、站内信消息适配手机端

src/views/erp/purchase/supplier/car/CarForm.vue

@@ -1,5 +1,79 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="500">
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="dialogVisible"
+    :title="dialogTitle"
+    direction="rtl"
+    size="100%"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-position="top"
+      v-loading="formLoading"
+    >
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">基本信息</div>
+        <el-form-item label="司机姓名" prop="driverName">
+          <el-input v-model="formData.driverName" placeholder="请输入司机姓名" />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="licensePlate">
+          <el-input v-model="formData.licensePlate" placeholder="请输入车牌号" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="contactPhone">
+          <el-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">车辆参数</div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-form-item label="长（米）" prop="carLength">
+              <el-input-number v-model="formData.carLength" :min="0" :precision="2" :step="0.1" controls-position="right" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="宽（米）" prop="carWidth">
+              <el-input-number v-model="formData.carWidth" :min="0" :precision="2" :step="0.1" controls-position="right" style="width:100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="核定吨位（吨）" prop="ratedTonnage">
+          <el-input-number v-model="formData.ratedTonnage" :min="0" :precision="2" :step="0.1" controls-position="right" style="width:100%" />
+        </el-form-item>
+      </div>
+
+      <div class="mobile-form-section">
+        <div class="mobile-form-section__title">其他信息</div>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="dialogVisible = false" style="flex:1">取消</el-button>
+        <el-button type="primary" @click="submitForm" :disabled="formLoading" style="flex:1">确定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
+  <Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="500">
     <el-form
       ref="formRef"
       :model="formData"
@@ -46,12 +120,19 @@
     </template>
   </Dialog>
 </template>
+
 <script setup lang="ts">
 import * as CarApi from '@/api/erp/purchase/car'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
 defineOptions({ name: 'CarForm' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -136,4 +217,26 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script> 
+</script>
+
+<style lang="scss" scoped>
+.mobile-form-section {
+  margin-bottom: 20px;
+  
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>

src/views/erp/purchase/supplier/car/index.vue

@@ -1,112 +1,196 @@
 <template>
-  <ContentWrap>
+  <!-- 移动端布局 -->
-    <!-- 搜索工作栏 -->
+  <div v-if="isMobile" class="mobile-car-list">
-    <el-form
+    <!-- 顶部操作栏 -->
-      class="-mb-15px"
+    <div class="mobile-header">
-      :model="queryParams"
+      <div class="mobile-header__search">
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="司机姓名" prop="driverName">
-        <el-input
-          v-model="queryParams.driverName"
-          placeholder="请输入司机姓名"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="车牌号" prop="licensePlate">
         <el-input
           v-model="queryParams.licensePlate"
-          placeholder="请输入车牌号"
+          placeholder="搜索车牌号/司机"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
+          :prefix-icon="Search"
         />
-      </el-form-item>
+      </div>
-      <el-form-item>
+      <div class="mobile-header__actions">
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['erp:car:create']" />
-        <el-button
+      </div>
-          type="primary"
+    </div>
-          plain
+
-          @click="openForm('create')"
+    <!-- 卡片列表 -->
-          v-hasPermi="['erp:car:create']"
+    <div class="mobile-list" v-loading="loading">
-        >
+      <div v-if="list.length === 0 && !loading" class="mobile-empty">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        <el-empty description="暂无车辆数据" />
-        </el-button>
+      </div>
-        <el-button
+      <div
-          type="success"
+        v-for="row in list"
-          plain
+        :key="row.id"
-          @click="openImportForm()"
+        class="mobile-card"
-          v-hasPermi="['erp:car:import']"
+        @click="openForm('update', row.id)"
-        >
+      >
-          <Icon icon="ep:upload" class="mr-5px" /> 导入
+        <div class="mobile-card__header">
-        </el-button>
+          <span class="mobile-card__plate">{{ row.licensePlate }}</span>
-        <el-button
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
-          type="success"
+        </div>
-          plain
+        <div class="mobile-card__body">
-          @click="handleExport"
+          <div class="mobile-card__row">
-          :loading="exportLoading"
+            <span class="mobile-card__label">司机</span>
-          v-hasPermi="['erp:car:export']"
+            <span class="mobile-card__value">{{ row.driverName }}</span>
-        >
+          </div>
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <div class="mobile-card__row">
-        </el-button>
+            <span class="mobile-card__label">电话</span>
-      </el-form-item>
+            <span class="mobile-card__value">{{ row.contactPhone || '-' }}</span>
-    </el-form>
+          </div>
-  </ContentWrap>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">核定吨位</span>
+            <span class="mobile-card__value">{{ row.ratedTonnage ? row.ratedTonnage + ' 吨' : '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">车辆尺寸</span>
+            <span class="mobile-card__value">{{ row.carLength && row.carWidth ? `${row.carLength}m × ${row.carWidth}m` : '-' }}</span>
+          </div>
+        </div>
+        <div class="mobile-card__footer" @click.stop>
+          <el-button size="small" type="primary" @click="openForm('update', row.id)" v-hasPermi="['erp:car:update']">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row.id)" v-hasPermi="['erp:car:delete']">删除</el-button>
+        </div>
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
-      <el-table-column label="司机姓名" align="center" prop="driverName" />
-      <el-table-column label="车牌号" align="center" prop="licensePlate" />
-      <el-table-column label="联系电话" align="center" prop="contactPhone" />
-      <el-table-column label="长（米）" align="center" prop="carLength" />
-      <el-table-column label="宽（米）" align="center" prop="carWidth" />
-      <el-table-column label="核定吨位（吨）" align="center" prop="ratedTonnage" />
-      <el-table-column label="创建时间" align="center" prop="createTime" sortable>
-        <template #default="scope">
-          <span>{{ formatDate(new Date(scope.row.createTime)) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:car:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['erp:car:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- 分页 -->
-    <Pagination
+    <div class="mobile-pagination" v-if="total > 0">
-      :total="total"
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
-      v-model:page="queryParams.pageNo"
+    </div>
-      v-model:limit="queryParams.pageSize"
+
-      @pagination="getList"
+    <!-- 筛选抽屉 -->
-    />
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="50%">
-  </ContentWrap>
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="司机姓名" prop="driverName">
+          <el-input v-model="queryParams.driverName" placeholder="请输入司机姓名" clearable style="width:100%" />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="licensePlate">
+          <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号" clearable style="width:100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+  </div>
+
+  <!-- PC端布局 -->
+  <template v-else>
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="司机姓名" prop="driverName">
+          <el-input
+            v-model="queryParams.driverName"
+            placeholder="请输入司机姓名"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="licensePlate">
+          <el-input
+            v-model="queryParams.licensePlate"
+            placeholder="请输入车牌号"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button
+            type="primary"
+            plain
+            @click="openForm('create')"
+            v-hasPermi="['erp:car:create']"
+          >
+            <Icon icon="ep:plus" class="mr-5px" /> 新增
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            @click="openImportForm()"
+            v-hasPermi="['erp:car:import']"
+          >
+            <Icon icon="ep:upload" class="mr-5px" /> 导入
+          </el-button>
+          <el-button
+            type="success"
+            plain
+            @click="handleExport"
+            :loading="exportLoading"
+            v-hasPermi="['erp:car:export']"
+          >
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
+        <el-table-column label="司机姓名" align="center" prop="driverName" />
+        <el-table-column label="车牌号" align="center" prop="licensePlate" />
+        <el-table-column label="联系电话" align="center" prop="contactPhone" />
+        <el-table-column label="长（米）" align="center" prop="carLength" />
+        <el-table-column label="宽（米）" align="center" prop="carWidth" />
+        <el-table-column label="核定吨位（吨）" align="center" prop="ratedTonnage" />
+        <el-table-column label="创建时间" align="center" prop="createTime" sortable>
+          <template #default="scope">
+            <span>{{ formatDate(new Date(scope.row.createTime)) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['erp:car:update']"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['erp:car:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <CarForm ref="formRef" @success="getList" />
@@ -116,6 +200,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
@@ -123,16 +208,22 @@ import * as CarApi from '@/api/erp/purchase/car/index'
 import * as CarVO from '@/api/erp/purchase/car/index'
 import CarForm from './CarForm.vue'
 import CarImportForm from './CarImportForm.vue'
+import { useWindowSize } from '@vueuse/core'
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 
 /** 车辆管理列表 */
 defineOptions({ name: 'ErpCar' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<any[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const filterVisible = ref(false) // 筛选抽屉
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -165,7 +256,13 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
@@ -210,7 +307,87 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
- onMounted(() => {
+onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-car-list {
+  padding: 12px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+  &__search { flex: 1; }
+  &__actions { display: flex; gap: 4px; flex-shrink: 0; }
+}
+
+.mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-empty { padding: 40px 0; }
+
+.mobile-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  &__plate {
+    font-weight: 600;
+    font-size: 16px;
+    color: #303133;
+  }
+  
+  &__body { font-size: 13px; }
+  
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+  }
+  
+  &__label {
+    color: #909399;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  
+  &__value {
+    color: #606266;
+    text-align: right;
+  }
+  
+  &__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
+</style>

src/views/system/notify/my/MyNotifyMessageDetail.vue

@@ -1,5 +1,48 @@
 <template>
-  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="消息详情">
+  <!-- 移动端使用抽屉 -->
+  <el-drawer
+    v-if="isMobile"
+    v-model="dialogVisible"
+    title="消息详情"
+    direction="btt"
+    size="70%"
+  >
+    <div class="mobile-detail">
+      <div class="mobile-detail__header">
+        <div class="mobile-detail__sender">{{ detailData.templateNickname }}</div>
+        <div class="mobile-detail__time">{{ formatDate(detailData.createTime) }}</div>
+      </div>
+
+      <div class="mobile-detail__meta">
+        <div class="meta-item">
+          <span class="meta-item__label">消息类型</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
+        </div>
+        <div class="meta-item">
+          <span class="meta-item__label">状态</span>
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
+        </div>
+        <div class="meta-item" v-if="detailData.readStatus">
+          <span class="meta-item__label">阅读时间</span>
+          <span class="meta-item__value">{{ formatDate(detailData.readTime) }}</span>
+        </div>
+      </div>
+
+      <div class="mobile-detail__content">
+        <div class="content-title">消息内容</div>
+        <div class="content-body">{{ detailData.templateContent }}</div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="mobile-drawer-footer">
+        <el-button @click="dialogVisible = false" style="flex:1">关闭</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端使用对话框 -->
+  <Dialog v-else v-model="dialogVisible" :max-height="500" :scroll="true" title="消息详情">
     <el-descriptions :column="1" border>
       <el-descriptions-item label="发送人">
         {{ detailData.templateNickname }}
@@ -23,12 +66,17 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
+import { useWindowSize } from '@vueuse/core'
 
 defineOptions({ name: 'MyNotifyMessageDetailDetail' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref({} as NotifyMessageApi.NotifyMessageVO) // 详情数据
@@ -46,3 +94,77 @@ const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
+
+<style lang="scss" scoped>
+.mobile-detail {
+  &__header {
+    text-align: center;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 16px;
+  }
+
+  &__sender {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 4px;
+  }
+
+  &__time {
+    font-size: 13px;
+    color: #909399;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    margin-bottom: 16px;
+  }
+
+  &__content {
+    .content-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+
+    .content-body {
+      font-size: 14px;
+      color: #606266;
+      line-height: 1.8;
+      padding: 12px;
+      background: #fafafa;
+      border-radius: 8px;
+    }
+  }
+}
+
+.meta-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__label {
+    font-size: 13px;
+    color: #909399;
+  }
+
+  &__value {
+    font-size: 13px;
+    color: #606266;
+  }
+}
+
+.mobile-drawer-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>

src/views/system/notify/my/index.vue

@@ -1,128 +1,199 @@
 <template>
-  <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+  <!-- 移动端布局 -->
+  <div v-if="isMobile" class="mobile-notify-list">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__title">我的站内信</div>
+      <div class="mobile-header__actions">
+        <el-button size="small" @click="handleUpdateAll">全部已读</el-button>
+      </div>
+    </div>
 
-  <ContentWrap>
+    <!-- 快捷筛选 -->
-    <!-- 搜索工作栏 -->
+    <div class="mobile-quick-filter">
-    <el-form
+      <div
-      class="-mb-15px"
+        class="quick-filter-item"
-      :model="queryParams"
+        :class="{ active: queryParams.readStatus === undefined }"
-      ref="queryFormRef"
+        @click="handleQuickFilter(undefined)"
-      :inline="true"
+      >全部</div>
-      label-width="68px"
+      <div
-    >
+        class="quick-filter-item"
-      <el-form-item label="是否已读" prop="readStatus">
+        :class="{ active: queryParams.readStatus === false }"
-        <el-select
+        @click="handleQuickFilter(false)"
-          v-model="queryParams.readStatus"
+      >未读</div>
-          placeholder="请选择状态"
+      <div
-          clearable
+        class="quick-filter-item"
-          class="!w-240px"
+        :class="{ active: queryParams.readStatus === true }"
-        >
+        @click="handleQuickFilter(true)"
-          <el-option
+      >已读</div>
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+    </div>
-            :key="dict.value"
+
-            :label="dict.label"
+    <!-- 卡片列表 -->
-            :value="dict.value"
+    <div class="mobile-list" v-loading="loading">
-          />
+      <div v-if="list.length === 0 && !loading" class="mobile-empty">
-        </el-select>
+        <el-empty description="暂无消息" />
-      </el-form-item>
+      </div>
-      <el-form-item label="发送时间" prop="createTime">
+      <div
-        <el-date-picker
+        v-for="row in list"
-          v-model="queryParams.createTime"
+        :key="row.id"
-          value-format="YYYY-MM-DD HH:mm:ss"
+        class="mobile-card"
-          type="daterange"
+        :class="{ 'mobile-card--unread': !row.readStatus }"
-          start-placeholder="开始日期"
+        @click="openDetail(row)"
-          end-placeholder="结束日期"
+      >
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+        <div class="mobile-card__header">
-          class="!w-240px"
+          <div class="mobile-card__sender">
-        />
+            <span class="mobile-card__dot" v-if="!row.readStatus"></span>
-      </el-form-item>
+            {{ row.templateNickname }}
-      <el-form-item>
+          </div>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <span class="mobile-card__time">{{ formatTime(row.createTime) }}</span>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </div>
-        <el-button @click="handleUpdateList">
+        <div class="mobile-card__body">
-          <Icon icon="ep:reading" class="mr-5px" /> 标记已读
+          <div class="mobile-card__type">
-        </el-button>
+            <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="row.templateType" />
-        <el-button @click="handleUpdateAll">
+          </div>
-          <Icon icon="ep:reading" class="mr-5px" /> 全部已读
+          <div class="mobile-card__content">{{ row.templateContent }}</div>
-        </el-button>
+        </div>
-      </el-form-item>
+      </div>
-    </el-form>
+    </div>
-  </ContentWrap>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      ref="tableRef"
-      row-key="id"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
-      <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
-      <el-table-column
-        label="发送时间"
-        align="center"
-        prop="createTime"
-        width="200"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="类型" align="center" prop="templateType" width="180">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="消息内容"
-        align="center"
-        prop="templateContent"
-        show-overflow-tooltip
-      />
-      <el-table-column label="是否已读" align="center" prop="readStatus" width="160">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="阅读时间"
-        align="center"
-        prop="readTime"
-        width="200"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="操作" align="center" width="160">
-        <template #default="scope">
-          <el-button
-            link
-            :type="scope.row.readStatus ? 'primary' : 'warning'"
-            @click="openDetail(scope.row)"
-          >
-            {{ scope.row.readStatus ? '详情' : '已读' }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- 分页 -->
-    <Pagination
+    <div class="mobile-pagination" v-if="total > 0">
-      :total="total"
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
-      v-model:page="queryParams.pageNo"
+    </div>
-      v-model:limit="queryParams.pageSize"
+  </div>
-      @pagination="getList"
+
-    />
+  <!-- PC端布局 -->
-  </ContentWrap>
+  <template v-else>
+    <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="是否已读" prop="readStatus">
+          <el-select
+            v-model="queryParams.readStatus"
+            placeholder="请选择状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发送时间" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button @click="handleUpdateList">
+            <Icon icon="ep:reading" class="mr-5px" /> 标记已读
+          </el-button>
+          <el-button @click="handleUpdateAll">
+            <Icon icon="ep:reading" class="mr-5px" /> 全部已读
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table
+        v-loading="loading"
+        :data="list"
+        ref="tableRef"
+        row-key="id"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
+        <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
+        <el-table-column
+          label="发送时间"
+          align="center"
+          prop="createTime"
+          width="200"
+          :formatter="dateFormatter"
+        />
+        <el-table-column label="类型" align="center" prop="templateType" width="180">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="消息内容"
+          align="center"
+          prop="templateContent"
+          show-overflow-tooltip
+        />
+        <el-table-column label="是否已读" align="center" prop="readStatus" width="160">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="阅读时间"
+          align="center"
+          prop="readTime"
+          width="200"
+          :formatter="dateFormatter"
+        />
+        <el-table-column label="操作" align="center" width="160">
+          <template #default="scope">
+            <el-button
+              link
+              :type="scope.row.readStatus ? 'primary' : 'warning'"
+              @click="openDetail(scope.row)"
+            >
+              {{ scope.row.readStatus ? '详情' : '已读' }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：详情 -->
   <MyNotifyMessageDetail ref="detailRef" />
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
 import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
+import { useWindowSize } from '@vueuse/core'
 
 defineOptions({ name: 'SystemMyNotify' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中
@@ -158,11 +229,37 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
-  tableRef.value.clearSelection()
+  tableRef.value?.clearSelection()
   handleQuery()
 }
 
+/** 快捷筛选 */
+const handleQuickFilter = (status: boolean | undefined) => {
+  queryParams.readStatus = status
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 格式化时间 */
+const formatTime = (time: string) => {
+  if (!time) return ''
+  const date = new Date(time)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days === 0) {
+    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  } else if (days === 1) {
+    return '昨天'
+  } else if (days < 7) {
+    return `${days}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
+  }
+}
+
 /** 详情操作 */
 const detailRef = ref()
 const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
@@ -216,3 +313,117 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.mobile-notify-list {
+  padding: 12px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+  }
+}
+
+.mobile-quick-filter {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  
+  .quick-filter-item {
+    padding: 6px 16px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: #fff;
+    transition: all 0.2s;
+    
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
+.mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-empty { padding: 40px 0; }
+
+.mobile-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s;
+  
+  &--unread {
+    border-left: 3px solid #409eff;
+  }
+  
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  
+  &__sender {
+    font-weight: 600;
+    font-size: 14px;
+    color: #303133;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  &__dot {
+    width: 8px;
+    height: 8px;
+    background: #f56c6c;
+    border-radius: 50%;
+  }
+  
+  &__time {
+    font-size: 12px;
+    color: #909399;
+  }
+  
+  &__body {
+    font-size: 13px;
+  }
+  
+  &__type {
+    margin-bottom: 6px;
+  }
+  
+  &__content {
+    color: #606266;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
+}
+</style>