feat: reoede web to tailwindcss

2025-08-10 14:32:24 +08:00
parent 0a12a25473
commit d557547bc0
192 changed files with 9624 additions and 9694 deletions
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref, computed, reactive, onMounted } from 'vue'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+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 { useRoute } from 'vue-router';
+import { request } from '@/api/api';
+// @ts-ignore
+import { getPageSize } from '@/util/pageUtils';
+
+
+interface HostedMessageItem {
+  id: number
+  title: string
+  content: string
+  url?: string
+  created_on: string
+  modified_on: string
+  status: number
+}
+
+const router = useRoute();
+
+let state = reactive({
+  tableData: [] as HostedMessageItem[],
+  total: 0,
+  currPage: 1,
+  pageSize: getPageSize(),
+  search: '',
+  optionValue: '',
+})
+
+// 状态过滤
+// const selectedStatus = ref('all')
+// Sheet 相关状态
+const isSheetOpen = ref(false)
+const selectedLog = ref('')
+const selectedTaskName = ref('')
+// 总页数
+const totalPages = computed(() => Math.ceil(state.total / state.pageSize))
+
+const getStatusText = (status: number) => {
+  return status === 1 ? '成功' : '失败'
+}
+
+// 打开消息详情Sheet
+const openMessageSheet = (message: HostedMessageItem) => {
+  selectedLog.value = formatMessageDisplayHtml(message);
+  selectedTaskName.value = message.title
+  isSheetOpen.value = true
+}
+
+const changePage = async (page: number) => {
+  if (page >= 1 && page <= totalPages.value) {
+    state.currPage = page
+    await queryListData(
+      state.currPage,
+      state.pageSize,
+      state.search,
+      state.optionValue
+    )
+  }
+}
+
+// 格式化处理显示的消息文本
+const formatMessageDisplayHtml = (message: HostedMessageItem) => {
+  let content = `标题: ${message.title}\n\n内容: ${message.content}`;
+  if (message.url) {
+    content += `\n\nURL: ${message.url}`;
+  }
+  content += `\n\n创建时间: ${message.created_on}`;
+  content += `\n修改时间: ${message.modified_on}`;
+  return content;
+}
+
+//触发过滤筛选
+const filterFunc = async () => {
+  await queryListData(state.currPage, state.pageSize, state.search, state.optionValue);
+}
+  
+
+const queryListData = async (page: number, size: number, text = '', query = '') => {
+  let params: any = { page: page, size: size, text: text, query: query };
+  const rsp = await request.get('/hostedmessages/list', { params: params });
+  state.tableData = await rsp.data.data.lists || [];
+  state.total = await rsp.data.data.total || 0;
+}
+
+onMounted(async () => {
+  // 页面加载触发消息显示
+  state.search = router.query.name?.toString() || '';
+  await queryListData(
+    1,
+    state.pageSize,
+    router.query.name?.toString() || '',
+    router.query.query?.toString() || ''
+  );
+});
+</script>
+
+<template>
+  <div class="p-6 w-full max-w-6xl mx-auto space-y-2">
+    <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+      <div class="flex-1 sm:flex-initial">
+        <Input v-model="state.search" placeholder="搜索消息..." class="w-full sm:w-64" @keyup.enter="filterFunc"
+          @blur="filterFunc" />
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-20">ID</TableHead>
+          <TableHead>消息标题</TableHead>
+          <TableHead>消息内容</TableHead>
+          <TableHead>创建时间</TableHead>
+          <TableHead class="text-center">详情/状态</TableHead>
+        </TableRow>
+      </TableHeader>
+
+      <TableBody>
+        <!-- 空数据展示 -->
+        <TableRow v-if="state.tableData.length === 0">
+          <TableCell colspan="5" class="text-center py-12">
+            <EmptyTableState 
+              title="暂无托管消息" 
+              description="还没有任何托管消息记录" 
+            >
+              <template #icon>
+                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                </svg>
+              </template>
+            </EmptyTableState>
+          </TableCell>
+        </TableRow>
+        
+        <!-- 数据行 -->
+        <TableRow v-for="message in state.tableData" :key="message.id">
+          <TableCell>{{ message.id }}</TableCell>
+          <TableCell>{{ message.title }}</TableCell>
+          <TableCell class="max-w-xs truncate" :title="formatMessageDisplayHtml(message)">{{ message.content }}</TableCell>
+          <TableCell>{{ message.created_on }}</TableCell>
+          <TableCell class="text-center space-x-2">
+            <Button size="sm" variant="outline" @click="openMessageSheet(message)">查看</Button>
+            <!-- <Button size="sm" variant="destructive">删除</Button> -->
+            <Badge :class="message.status === 1 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'">
+              {{ getStatusText(message.status) }}
+            </Badge>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+
+    <!-- 分页 -->
+    <Pagination 
+      :total="state.total" 
+      :current-page="state.currPage" 
+      :page-size="state.pageSize" 
+      @page-change="changePage" 
+    />
+
+    <!-- 消息详情Sheet -->
+    <Sheet v-model:open="isSheetOpen">
+      <SheetContent class="w-[600px] sm:w-[900px] lg:w-[1000px]">
+        <SheetHeader>
+          <SheetTitle>{{ selectedTaskName }} - 托管消息详情</SheetTitle>
+        </SheetHeader>
+        <div class="mt-6">
+          <div class="bg-gray-50 p-4 rounded-lg">
+            <pre class="whitespace-pre-wrap text-sm font-mono">{{ selectedLog }}</pre>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>