diff --git a/web/src/components/pages/cronMessages/CronMessages.vue b/web/src/components/pages/cronMessages/CronMessages.vue
index ab05082..e3c3cb9 100644
--- a/web/src/components/pages/cronMessages/CronMessages.vue
+++ b/web/src/components/pages/cronMessages/CronMessages.vue
@@ -7,6 +7,7 @@ import { Switch } from '@/components/ui/switch'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import EmptyTableState from '@/components/ui/EmptyTableState.vue'
 import Pagination from '@/components/ui/Pagination.vue'
+import ClickableTruncate from '@/components/ui/ClickableTruncate.vue'
 import AddCronMessages from './AddCronMessages.vue'
 import EditCronMessages from './EditCronMessages.vue'
 import { toast } from 'vue-sonner'
@@ -211,8 +212,12 @@ onMounted(async () => {
             <!-- 数据行 -->
             <TableRow v-for="cronMessage in state.tableData" :key="cronMessage.id">
               <TableCell>{{ cronMessage.id }}</TableCell>
-              <TableCell class="max-w-[100px] sm:max-w-[100px] truncate" :title="cronMessage.title">{{ cronMessage.title }}</TableCell>
-              <TableCell class="max-w-[100px] sm:max-w-[100px] truncate" :title="cronMessage.content">{{ cronMessage.content }}</TableCell>
+              <TableCell>
+                <ClickableTruncate :text="cronMessage.title" wrapper-class="max-w-[180px] sm:max-w-[260px]" preview-title="标题" />
+              </TableCell>
+              <TableCell>
+                <ClickableTruncate :text="cronMessage.content" wrapper-class="max-w-[220px] sm:max-w-[320px]" preview-title="内容" />
+              </TableCell>
               <TableCell>
                 <code class="max-w-[90px] sm:max-w-[9px] rounded text-sm font-mono bg-muted text-foreground border border-border">
                   {{ cronMessage.cron }}
diff --git a/web/src/components/pages/hostedMessage/HostedMessage.vue b/web/src/components/pages/hostedMessage/HostedMessage.vue
index 1db30dd..5cf1360 100644
--- a/web/src/components/pages/hostedMessage/HostedMessage.vue
+++ b/web/src/components/pages/hostedMessage/HostedMessage.vue
@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import EmptyTableState from '@/components/ui/EmptyTableState.vue'
 import Pagination from '@/components/ui/Pagination.vue'
+import ClickableTruncate from '@/components/ui/ClickableTruncate.vue'
 
 import { useRoute } from 'vue-router';
 import { request } from '@/api/api';
@@ -140,8 +141,12 @@ onMounted(async () => {
         <!-- 数据行 -->
         <TableRow v-for="message in state.tableData" :key="message.id">
           <TableCell>{{ message.id }}</TableCell>
-          <TableCell class="max-w-[220px] sm:max-w-[360px] truncate" :title="message.title">{{ message.title }}</TableCell>
-          <TableCell class="max-w-[320px] sm:max-w-[480px] truncate" :title="message.content">{{ message.content }}</TableCell>
+          <TableCell>
+            <ClickableTruncate :text="message.title" wrapper-class="max-w-[220px] sm:max-w-[360px]" preview-title="消息标题" />
+          </TableCell>
+          <TableCell>
+            <ClickableTruncate :text="message.content" wrapper-class="max-w-[320px] sm:max-w-[480px]" preview-title="消息内容" />
+          </TableCell>
           <TableCell class="whitespace-nowrap w-[160px]">{{ message.created_on }}</TableCell>
           <TableCell class="text-center space-x-2">
             <Button size="sm" variant="outline" @click="openMessageSheet(message)">查看</Button>
diff --git a/web/src/components/pages/sendLogs/SendLogs.vue b/web/src/components/pages/sendLogs/SendLogs.vue
index 2b2d111..6fa7445 100644
--- a/web/src/components/pages/sendLogs/SendLogs.vue
+++ b/web/src/components/pages/sendLogs/SendLogs.vue
@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import EmptyTableState from '@/components/ui/EmptyTableState.vue'
+import ClickableTruncate from '@/components/ui/ClickableTruncate.vue'
 import Pagination from '@/components/ui/Pagination.vue'
 
 import { useRoute } from 'vue-router';
@@ -211,8 +212,12 @@ onMounted(async () => {
         <!-- 数据行 -->
         <TableRow v-for="task in state.tableData" :key="task.id">
           <TableCell>{{ task.id }}</TableCell>
-          <TableCell class="max-w-[220px] sm:max-w-[360px] truncate" :title="task.task_name">{{ task.task_name }}</TableCell>
-          <TableCell class="max-w-[320px] sm:max-w-[480px] truncate" :title="task.log">{{ task.log }}</TableCell>
+          <TableCell>
+            <ClickableTruncate :text="task.task_name" wrapper-class="max-w-[220px] sm:max-w-[360px]" preview-title="任务名称" />
+          </TableCell>
+          <TableCell>
+            <ClickableTruncate :text="task.log" wrapper-class="max-w-[320px] sm:max-w-[480px]" preview-title="发信日志" />
+          </TableCell>
           <TableCell class="whitespace-nowrap w-[160px]">{{ task.created_on }}</TableCell>
           <TableCell class="text-center space-x-2">
             <Button size="sm" variant="outline" @click="openLogSheet(task)">查看</Button>
@@ -240,8 +245,8 @@ onMounted(async () => {
           <SheetTitle>{{ selectedTaskName }} - 发信日志详情</SheetTitle>
         </SheetHeader>
         <div class="mt-4">
-          <div class="bg-card p-4 rounded-lg border border-border max-h-[82vh] overflow-y-auto break-words">
-            <pre class="whitespace-pre-wrap text-sm font-mono text-foreground">{{ selectedLog }}</pre>
+          <div class="rounded-lg p-4 bg-muted/40 dark:bg-white/5 ring-1 ring-border/50 shadow-sm max-h-[82vh] overflow-y-auto break-words">
+            <pre class="whitespace-pre-wrap text-sm font-mono leading-relaxed text-foreground">{{ selectedLog }}</pre>
           </div>
         </div>
       </SheetContent>
diff --git a/web/src/components/pages/sendWays/SendWays.vue b/web/src/components/pages/sendWays/SendWays.vue
index f1e1287..d99a619 100644
--- a/web/src/components/pages/sendWays/SendWays.vue
+++ b/web/src/components/pages/sendWays/SendWays.vue
@@ -275,8 +275,8 @@ onMounted(async () => {
           <SheetTitle>{{ selectedChannelName }} - 发信方式配置详情</SheetTitle>
         </SheetHeader>
         <div class="mt-6">
-          <div class="bg-card p-4 rounded-lg border border-border">
-            <pre class="whitespace-pre-wrap text-sm font-mono text-foreground">{{ selectedConfig }}</pre>
+          <div class="rounded-lg p-4 bg-muted/40 dark:bg-white/5 ring-1 ring-border/50 shadow-sm">
+            <pre class="whitespace-pre-wrap text-sm font-mono leading-relaxed text-foreground">{{ selectedConfig }}</pre>
           </div>
         </div>
       </SheetContent>
diff --git a/web/src/components/ui/ClickableTruncate.vue b/web/src/components/ui/ClickableTruncate.vue
new file mode 100644
index 0000000..e45a443
--- /dev/null
+++ b/web/src/components/ui/ClickableTruncate.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+interface Props {
+  text: string
+  previewTitle?: string
+  wrapperClass?: string
+}
+
+defineProps<Props>()
+const open = ref(false)
+
+const handleClick = () => {
+  open.value = true
+}
+</script>
+
+<template>
+  <span
+    class="inline-block truncate align-middle cursor-pointer"
+    :class="wrapperClass"
+    :title="text"
+    @click="handleClick"
+  >
+    {{ text || '-' }}
+  </span>
+
+  <Dialog v-model:open="open">
+    <DialogContent class="w-[90vw] sm:max-w-xl lg:max-w-2xl">
+      <DialogHeader>
+        <DialogTitle class="text-sm font-medium text-foreground">{{ previewTitle || '内容' }}</DialogTitle>
+      </DialogHeader>
+      <div class="mt-1">
+        <div class="rounded-lg p-4 bg-muted/40 dark:bg-white/5 ring-1 ring-border/50 shadow-sm max-h-[65vh] overflow-auto">
+          <pre class="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">{{ text }}</pre>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+