my-bigScreen/screen-vue/src/views/desktop/components/Note.vue

<template>
  <div class="table-container">
    <div class="main-card">
      <div class="title-section">
        <h1 class="title">便签信息</h1>
      </div>
      <div class="divider"></div>
      <div class="content-section">
        <div class="table-wrapper">
          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: '#f5f7fa' }"
            style="width: 100%;"
            height="100%"
            v-loading="loading"
          >
            <el-table-column
              prop="createTime"
              label="记录日期"
              width="180"
              fixed="left"
            />
            <el-table-column
              prop="title"
              label="主题"
              width="120"
              show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content"
              label="内容"
              show-overflow-tooltip="true"
            />
            <el-table-column
              label="级别"
              width="80"
            >
              <template #default="scope">
                {{ priorityDict[scope.row.priority] || '未知' }}
              </template>
            </el-table-column>
			<el-table-column
			  label="类型"
			  width="100"
			>
			  <template #default="scope">
			    {{ typeDict[scope.row.type] || '未知' }}
			  </template>
			</el-table-column>
            <el-table-column
              label="状态"
              width="100"
            >
			<template #default="scope">
			  {{ stausDict[scope.row.ustatus] || '未知' }}
			</template>
			</el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { getNoteList } from '@/api/bizHome'

const tableData = ref([])
const loading = ref(true)

const priorityDict = {
  low: '低',
  medium: '中',
  high: '高'
}

const typeDict = {
  work: '工作',
  life: '生活',
  study: '学习',
  other: '其他'
}

const stausDict = {
	todo: '待开始',
	doing: '进行中',
	done: '已完成'
}

async function getDataList() {
  try {
    const res = await getNoteList()
    tableData.value = res || []
  } catch (error) {
    console.error('获取数据失败:', error)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  getDataList()
})
</script>

<style scoped>
.table-container {
  width: 100%;
  height: 100%;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.main-card {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title-section {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  margin: 0;
  border-radius: 4px 4px 0 0;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
}

.content-section {
  flex: 1;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-right: none !important;
}
:deep(.el-table__fixed-left) {
  border-right: none !important;
  box-shadow: none !important;
}
:deep(.el-table__fixed-right) {
  border-left: none !important;
  box-shadow: none !important;
}
:deep(.el-table__fixed td),
:deep(.el-table__fixed th) {
  border-right: none !important;
}

:deep(.el-table__body-wrapper) {
  overflow: auto;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  display: block;
  height: 6px;
  width: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: #c0c4cc;
}

:deep(.el-table th) {
  font-weight: 600;
  color: #303133;
}
</style>