diff --git a/openhis-ui-vue3/src/views/billing/outpatientsettlement/OutpatientDailySettlement.vue b/openhis-ui-vue3/src/views/billing/outpatientsettlement/OutpatientDailySettlement.vue
new file mode 100644
index 000000000..2836edc93
--- /dev/null
+++ b/openhis-ui-vue3/src/views/billing/outpatientsettlement/OutpatientDailySettlement.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="outpatient-daily-settlement">
+    <!-- 顶部筛选区 -->
+    <el-card class="settlement-filter-area" shadow="never">
+      <el-form :model="queryParams" inline label-width="80px">
+        <el-form-item label="结算日期">
+          <el-date-picker
+            v-model="queryParams.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="收费员">
+          <el-select v-model="queryParams.cashierId" placeholder="请选择收费员" clearable style="width: 160px">
+            <el-option label="全部" value="" />
+            <el-option label="doctor1" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 汇总数据区 -->
+    <el-row :gutter="16" class="settlement-summary-cards">
+      <el-col :xs="24" :sm="12" :md="6" v-for="card in summaryCards" :key="card.label">
+        <el-card shadow="hover" class="summary-card">
+          <template #header>
+            <div class="card-header">{{ card.label }}</div>
+          </template>
+          <div class="card-value">{{ card.value }}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 明细表格区 -->
+    <el-card class="settlement-detail-table" shadow="never">
+      <template #header>
+        <div class="table-header">日结明细</div>
+      </template>
+      <el-table :data="tableData" border stripe style="width: 100%">
+        <el-table-column prop="transactionNo" label="流水号" width="180" align="center" />
+        <el-table-column prop="patientName" label="患者姓名" width="120" align="center" />
+        <el-table-column prop="payMethod" label="支付方式" width="120" align="center" />
+        <el-table-column prop="amount" label="金额(元)" width="120" align="right" />
+        <el-table-column prop="status" label="状态" width="100" align="center" />
+        <el-table-column prop="createTime" label="结算时间" min-width="180" align="center" />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const queryParams = reactive({
+  dateRange: [],
+  cashierId: ''
+})
+
+const summaryCards = ref([
+  { label: '现金收入', value: '¥ 0.00' },
+  { label: '医保统筹', value: '¥ 0.00' },
+  { label: '个人账户', value: '¥ 0.00' },
+  { label: '合计金额', value: '¥ 0.00' }
+])
+
+const tableData = ref([])
+
+const handleQuery = () => {
+  console.log('查询日结数据', queryParams)
+}
+
+const handleReset = () => {
+  queryParams.dateRange = []
+  queryParams.cashierId = ''
+}
+</script>
+
+<style scoped>
+.outpatient-daily-settlement {
+  padding: 16px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.settlement-filter-area {
+  margin-bottom: 16px;
+}
+
+.settlement-summary-cards {
+  margin-bottom: 16px;
+}
+
+.summary-card .card-header {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.summary-card .card-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+  text-align: right;
+}
+
+.settlement-detail-table .table-header {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+</style>
diff --git a/tests/e2e/specs/bug-regression.spec.ts b/tests/e2e/specs/bug-regression.spec.ts
index aee8decf2..c3c4361fa 100644
--- a/tests/e2e/specs/bug-regression.spec.ts
+++ b/tests/e2e/specs/bug-regression.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import LabRequest from '@/views/inpatientdoctorstation/lab/LabRequest.vue';
+import OutpatientDailySettlement from '@/views/billing/outpatientsettlement/OutpatientDailySettlement.vue';
 
 // @bug466 @regression
 describe('Bug #466: 检验申请单核心质控字段及联动逻辑', () => {
@@ -27,7 +28,6 @@ describe('Bug #466: 检验申请单核心质控字段及联动逻辑', () => {
     const wrapper = mount(LabRequest, {
       global: { stubs: ['el-dialog', 'el-tree', 'el-checkbox-group', 'el-radio-group', 'el-input', 'el-date-picker'] }
     });
-    // 模拟左侧勾选项目
     wrapper.vm.selectedItemIds = [101];
     wrapper.vm.itemList = [{ id: 101, name: '血常规', specimenType: '血液' }];
     await wrapper.vm.$nextTick();
@@ -51,3 +51,16 @@ describe('Bug #466: 检验申请单核心质控字段及联动逻辑', () => {
     expect(mockAlert).toHaveBeenCalledWith('执行时间不可早于当前时间', '提示', { type: 'warning' });
   });
 });
+
+// @bug568 @regression
+describe('Bug #568: 收费工作站-门诊日结排版修复', () => {
+  it('门诊日结页面应包含清晰的布局结构：顶部筛选区、汇总卡片区、明细表格区', () => {
+    const wrapper = mount(OutpatientDailySettlement, {
+      global: { stubs: ['el-card', 'el-form', 'el-form-item', 'el-date-picker', 'el-select', 'el-option', 'el-button', 'el-row', 'el-col', 'el-table', 'el-table-column'] }
+    });
+    expect(wrapper.find('.settlement-filter-area').exists()).toBe(true);
+    expect(wrapper.find('.settlement-summary-cards').exists()).toBe(true);
+    expect(wrapper.find('.settlement-detail-table').exists()).toBe(true);
+    expect(wrapper.findAll('.summary-card').length).toBeGreaterThanOrEqual(3);
+  });
+});