前端：

1、优化消息排序逻辑
2、新增加载历史消息
3、修复已知问题
后端：
1、优化消息排序逻辑
2、增加用户信息缓存机制
3、修改日期类型为DateTimeOffset改善时区信息丢失问题
3、修复了已知问题
数据库：
1、新增SequenceId字段用于消息排序
2、新增ClientMsgId字段用于客户端消息回执

frontend/web/src/components/messages/HistoryLoading.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="history-loading-container">
+    <div v-if="loading" class="state-wrapper loading">
+      <svg class="spinner" viewBox="0 0 50 50">
+        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+      </svg>
+      <span>正在获取历史消息...</span>
+    </div>
+
+    <div v-else-if="error" class="state-wrapper error" @click="$emit('retry')">
+      <span>加载失败，点击重试</span>
+    </div>
+
+    <div v-else-if="finished" class="state-wrapper finished">
+      <span>— 已显示全部消息 —</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  finished: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['retry']);
+</script>
+
+<style scoped>
+.history-loading-container {
+  width: 100%;
+  padding: 15px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  color: #999;
+}
+
+.state-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.error {
+  color: #ff4d4f;
+  cursor: pointer;
+}
+
+.finished {
+  color: #ccc;
+  letter-spacing: 1px;
+}
+
+/* 简单的 CSS 旋转动画 */
+.spinner {
+  animation: rotate 2s linear infinite;
+  width: 16px;
+  height: 16px;
+}
+
+.spinner .path {
+  stroke: #409eff;
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes dash {
+  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+}
+</style>