Parcourir la source

更新环境变量的API地址,配置Vite开发服务器端口为5175,重构仪表盘视图为欢迎页面,删除不再使用的用户、设备、替换记录、TG用户和钱包视图文件。

wui il y a 7 mois
Parent
commit
2452e2ba8b

+ 1 - 1
.env

@@ -1 +1 @@
-VITE_API_URL=http://localhost:3000/api
+VITE_API_URL=http://localhost:3010/api

+ 0 - 25
src/router/index.js

@@ -25,31 +25,6 @@ const router = createRouter({
           name: 'dashboard',
           component: DashboardView
         },
-        {
-          path: 'user',
-          name: 'user',
-          component: () => import('@/views/UserView.vue')
-        },
-        {
-          path: 'wallet',
-          name: 'wallet',
-          component: () => import('@/views/WalletView.vue')
-        },
-        {
-          path: 'device',
-          name: 'device',
-          component: () => import('@/views/DeviceView.vue')
-        },
-        {
-          path: 'tg-user',
-          name: 'tg-user',
-          component: () => import('@/views/TgUserView.vue')
-        },
-        {
-          path: 'replacement',
-          name: 'replacement',
-          component: () => import('@/views/ReplacementView.vue')
-        },
         {
           path: 'user',
           name: 'user',

+ 8 - 269
src/views/DashboardView.vue

@@ -1,155 +1,13 @@
 <script setup>
-import { ref } from 'vue'
-import Chart from 'primevue/chart'
-import Card from 'primevue/card'
-import Divider from 'primevue/divider'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-
-// 模拟图表数据
-const salesChartData = ref({
-  labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
-  datasets: [
-    {
-      label: '当年销售额',
-      data: [65, 59, 80, 81, 56, 55, 40],
-      fill: false,
-      borderColor: '#2196F3',
-      tension: 0.4
-    },
-    {
-      label: '去年销售额',
-      data: [28, 48, 40, 19, 86, 27, 90],
-      fill: false,
-      borderColor: '#4CAF50',
-      tension: 0.4
-    }
-  ]
-})
-
-const visitorsChartData = ref({
-  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-  datasets: [
-    {
-      label: '访问量',
-      data: [540, 325, 702, 620, 815, 580, 770],
-      backgroundColor: ['rgba(255, 159, 64, 0.2)'],
-      borderColor: ['rgb(255, 159, 64)'],
-      borderWidth: 1
-    }
-  ]
-})
-
-const chartOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false
-})
-
-// 模拟最近订单数据
-const recentOrders = ref([
-  { id: '1001', customer: '张三', date: '2023-09-18', amount: '¥1,200', status: '已完成' },
-  { id: '1002', customer: '李四', date: '2023-09-17', amount: '¥890', status: '处理中' },
-  { id: '1003', customer: '王五', date: '2023-09-16', amount: '¥2,500', status: '已完成' },
-  { id: '1004', customer: '赵六', date: '2023-09-15', amount: '¥1,750', status: '已取消' },
-  { id: '1005', customer: '钱七', date: '2023-09-14', amount: '¥3,200', status: '已完成' }
-])
-
-// 统计卡片数据
-const statsCards = ref([
-  { title: '总销售额', value: '¥128,430', icon: 'pi pi-money-bill', color: '#2196F3' },
-  { title: '新订单', value: '64', icon: 'pi pi-shopping-cart', color: '#4CAF50' },
-  { title: '总访问量', value: '12,846', icon: 'pi pi-users', color: '#FF9800' },
-  { title: '转化率', value: '24%', icon: 'pi pi-percentage', color: '#9C27B0' }
-])
+// 空白页面,不需要任何逻辑
 </script>
 
 <template>
   <div class="dashboard-container">
-    <h1 class="text-3xl font-bold mb-4">仪表盘</h1>
-
-    <!-- 统计卡片行 -->
-    <div class="grid">
-      <div v-for="(card, index) in statsCards" :key="index" class="col-12 md:col-6 lg:col-3">
-        <Card class="stat-card mb-4">
-          <template #content>
-            <div class="flex align-items-center">
-              <div class="stat-icon mr-3" :style="{ backgroundColor: card.color + '20', color: card.color }">
-                <i :class="card.icon" style="font-size: 2rem"></i>
-              </div>
-              <div>
-                <div class="text-500 mb-1">{{ card.title }}</div>
-                <div class="text-900 font-medium text-xl">{{ card.value }}</div>
-              </div>
-            </div>
-          </template>
-        </Card>
-      </div>
-    </div>
-
-    <!-- 图表行 -->
-    <div class="grid mt-3">
-      <div class="col-12 lg:col-8">
-        <Card class="mb-4">
-          <template #title>
-            <div class="flex justify-content-between align-items-center">
-              <h3>销售趋势</h3>
-            </div>
-          </template>
-          <template #content>
-            <div style="height: 350px">
-              <Chart type="line" :data="salesChartData" :options="chartOptions" />
-            </div>
-          </template>
-        </Card>
-      </div>
-      <div class="col-12 lg:col-4">
-        <Card class="mb-4">
-          <template #title>
-            <div class="flex justify-content-between align-items-center">
-              <h3>每周访问量</h3>
-            </div>
-          </template>
-          <template #content>
-            <div style="height: 350px">
-              <Chart type="bar" :data="visitorsChartData" :options="chartOptions" />
-            </div>
-          </template>
-        </Card>
-      </div>
+    <h1 class="text-3xl font-bold mb-4">首页</h1>
+    <div class="empty-content">
+      <p class="text-gray-500">欢迎使用管理系统</p>
     </div>
-
-    <!-- 最近订单表格 -->
-    <Card class="mb-4">
-      <template #title>
-        <div class="flex justify-content-between align-items-center">
-          <h3>最近订单</h3>
-        </div>
-      </template>
-      <template #content>
-        <div class="table-container">
-          <DataTable :value="recentOrders" responsiveLayout="scroll" class="p-datatable-sm" style="width: 100%">
-            <Column field="id" header="订单编号"></Column>
-            <Column field="customer" header="客户"></Column>
-            <Column field="date" header="日期"></Column>
-            <Column field="amount" header="金额"></Column>
-            <Column field="status" header="状态">
-              <template #body="slotProps">
-                <span
-                  :class="{
-                    'order-badge': true,
-                    'order-completed': slotProps.data.status === '已完成',
-                    'order-processing': slotProps.data.status === '处理中',
-                    'order-cancelled': slotProps.data.status === '已取消'
-                  }"
-                >
-                  {{ slotProps.data.status }}
-                </span>
-              </template>
-            </Column>
-          </DataTable>
-        </div>
-      </template>
-    </Card>
   </div>
 </template>
 
@@ -159,130 +17,11 @@ const statsCards = ref([
   max-width: 100%;
 }
 
-.stat-card {
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.24);
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  width: 100%;
-}
-
-.stat-card:hover {
-  box-shadow:
-    0 4px 8px rgba(0, 0, 0, 0.15),
-    0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.stat-icon {
-  width: 4rem;
-  height: 4rem;
-  border-radius: 12px;
+.empty-content {
   display: flex;
-  align-items: center;
   justify-content: center;
-}
-
-.order-badge {
-  padding: 0.25rem 0.5rem;
-  border-radius: 3px;
-  font-weight: 500;
-  font-size: 0.8rem;
-}
-
-.order-completed {
-  background-color: #4caf5020;
-  color: #4caf50;
-}
-
-.order-processing {
-  background-color: #2196f320;
-  color: #2196f3;
-}
-
-.order-cancelled {
-  background-color: #f4433620;
-  color: #f44336;
-}
-
-/* PrimeFlex 辅助类 */
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  margin-top: -0.5rem;
-  width: 100%;
-}
-
-.col-12 {
-  flex: 0 0 100%;
-  max-width: 100%;
-  padding: 0.5rem;
-}
-
-.justify-content-between {
-  justify-content: space-between;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.text-500 {
-  color: var(--text-color-secondary);
-}
-
-.text-900 {
-  color: var(--text-color);
-}
-
-.text-xl {
-  font-size: 1.25rem;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-@media (min-width: 768px) {
-  .md\:col-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-}
-
-@media (min-width: 992px) {
-  .lg\:col-3 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .lg\:col-8 {
-    flex: 0 0 66.6667%;
-    max-width: 66.6667%;
-  }
-
-  .lg\:col-4 {
-    flex: 0 0 33.3333%;
-    max-width: 33.3333%;
-  }
-}
-
-.table-container {
-  width: 100%;
-  overflow-x: auto;
+  align-items: center;
+  min-height: 400px;
+  text-align: center;
 }
 </style>

+ 0 - 78
src/views/DeviceView.vue

@@ -1,78 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { listDevice } from '@/services/api'
-import { useDateFormat } from '@vueuse/core'
-
-const tableData = ref({
-  content: [],
-  metadata: {
-    page: 0,
-    size: 20,
-    total: 0
-  }
-})
-const search = ref('')
-const fetchData = async () => {
-  const response = await listDevice(tableData.value.metadata.page, tableData.value.metadata.size)
-  tableData.value = response
-}
-
-const handlePageChange = (event) => {
-  console.log('handlePageChange', event)
-  tableData.value.metadata.page = event.page
-  tableData.value.metadata.size = event.rows
-  fetchData()
-}
-
-const formatDate = (date) => {
-  return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss').value
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
-    <DataTable
-      :value="tableData.content"
-      :paginator="true"
-      :rows="tableData.metadata.size"
-      :rowsPerPageOptions="[10, 20, 50, 100]"
-      :totalRecords="tableData.metadata.total"
-      @page="handlePageChange"
-      lazy
-      scrollable
-    >
-      <template #header>
-        <div class="flex flex-wrap items-center">
-          <Button icon="pi pi-refresh" @click="fetchData" label="刷新" size="small" />
-          <div class="flex-1"></div>
-          <IconField>
-            <InputIcon>
-              <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="search" placeholder="搜素" />
-          </IconField>
-        </div>
-      </template>
-      <Column field="id" header="ID"></Column>
-      <Column field="platform" header="平台"></Column>
-      <Column field="version" header="版本"></Column>
-      <Column field="deviceInfo" header="设备信息"></Column>
-      <Column field="ip" header="IP"></Column>
-      <Column field="createdAt" header="创建时间" style="min-width: 200px">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.createdAt) }}
-        </template>
-      </Column>
-    </DataTable>
-  </div>
-</template>

+ 1 - 16
src/views/MainView.vue

@@ -33,22 +33,7 @@ const navItems = [
     name: 'dashboard'
   },
   {
-    label: '登录用户',
-    icon: 'pi pi-fw pi-users',
-    name: 'tg-user'
-  },
-  {
-    label: '设备列表',
-    icon: 'pi pi-fw pi-mobile',
-    name: 'device'
-  },
-  {
-    label: '替换记录',
-    icon: 'pi pi-fw pi-sync',
-    name: 'replacement'
-  },
-  {
-    label: '管理员',
+    label: '用户管理',
     icon: 'pi pi-fw pi-user',
     name: 'user'
   }

+ 0 - 78
src/views/ReplacementView.vue

@@ -1,78 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { listReplacements } from '@/services/api'
-import { useDateFormat } from '@vueuse/core'
-
-const tableData = ref({
-  content: [],
-  metadata: {
-    page: 0,
-    size: 20,
-    total: 0
-  }
-})
-const search = ref('')
-const fetchData = async () => {
-  const response = await listReplacements(tableData.value.metadata.page, tableData.value.metadata.size)
-  tableData.value = response
-}
-
-const handlePageChange = (event) => {
-  console.log('handlePageChange', event)
-  tableData.value.metadata.page = event.page
-  tableData.value.metadata.size = event.rows
-  fetchData()
-}
-
-const formatDate = (date) => {
-  return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss').value
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
-    <DataTable
-      :value="tableData.content"
-      :paginator="true"
-      :rows="tableData.metadata.size"
-      :rowsPerPageOptions="[10, 20, 50, 100]"
-      :totalRecords="tableData.metadata.total"
-      @page="handlePageChange"
-      lazy
-      scrollable
-    >
-      <template #header>
-        <div class="flex flex-wrap items-center">
-          <Button icon="pi pi-refresh" @click="fetchData" label="刷新" size="small" />
-          <div class="flex-1"></div>
-          <IconField>
-            <InputIcon>
-              <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="search" placeholder="搜素" />
-          </IconField>
-        </div>
-      </template>
-      <Column field="id" header="ID"></Column>
-      <Column field="address" header="钱包地址"></Column>
-      <Column field="replaceAddress" header="替换地址"></Column>
-      <Column field="chain" header="链"></Column>
-      <Column field="tgUserId" header="TGID"></Column>
-      <Column field="createdAt" header="创建时间" style="min-width: 200px">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.createdAt) }}
-        </template>
-      </Column>
-    </DataTable>
-  </div>
-</template>

+ 0 - 86
src/views/TgUserView.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { listTgUser } from '@/services/api'
-import { useDateFormat } from '@vueuse/core'
-
-const tableData = ref({
-  content: [],
-  metadata: {
-    page: 0,
-    size: 20,
-    total: 0
-  }
-})
-const search = ref('')
-const fetchData = async () => {
-  const response = await listTgUser(tableData.value.metadata.page, tableData.value.metadata.size)
-  tableData.value = response
-}
-
-const handlePageChange = (event) => {
-  console.log('handlePageChange', event)
-  tableData.value.metadata.page = event.page
-  tableData.value.metadata.size = event.rows
-  fetchData()
-}
-
-const formatDate = (date) => {
-  return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss').value
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
-    <DataTable
-      :value="tableData.content"
-      :paginator="true"
-      :rows="tableData.metadata.size"
-      :rowsPerPageOptions="[10, 20, 50, 100]"
-      :totalRecords="tableData.metadata.total"
-      @page="handlePageChange"
-      lazy
-      scrollable
-    >
-      <template #header>
-        <div class="flex flex-wrap items-center">
-          <Button icon="pi pi-refresh" @click="fetchData" label="刷新" size="small" />
-          <div class="flex-1"></div>
-          <IconField>
-            <InputIcon>
-              <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="search" placeholder="搜素" />
-          </IconField>
-        </div>
-      </template>
-      <Column field="id" header="ID"></Column>
-      <Column field="username" header="用户名">
-        <template #body="slotProps">
-          {{ slotProps.data.username ? `@${slotProps.data.username}` : '' }}
-        </template>
-      </Column>
-      <Column field="name" header="昵称"></Column>
-      <Column field="phone" header="手机号"></Column>
-      <Column field="createdAt" header="创建时间" style="min-width: 200px">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.createdAt) }}
-        </template>
-      </Column>
-      <Column field="lastOnline" header="上次上线" style="min-width: 200px">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.lastSeen) }}
-        </template>
-      </Column>
-    </DataTable>
-  </div>
-</template>

+ 0 - 84
src/views/WalletView.vue

@@ -1,84 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { listWallet, createWallet as createWalletApi } from '@/services/api'
-import { useDateFormat } from '@vueuse/core'
-
-const tableData = ref({
-  content: [],
-  metadata: {
-    page: 0,
-    size: 20,
-    total: 0
-  }
-})
-const search = ref('')
-const fetchData = async () => {
-  const response = await listWallet(tableData.value.metadata.page, tableData.value.metadata.size)
-  tableData.value = response
-}
-
-const handlePageChange = (event) => {
-  console.log('handlePageChange', event)
-  tableData.value.metadata.page = event.page
-  tableData.value.metadata.size = event.rows
-  fetchData()
-}
-
-const createWallet = async () => {
-  const response = await createWalletApi({
-    chain: 'ETH'
-  })
-  fetchData()
-}
-
-const formatDate = (date) => {
-  return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss').value
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <div class="rounded-lg p-4 bg-[var(--p-content-background)]">
-    <DataTable
-      :value="tableData.content"
-      :paginator="true"
-      :rows="tableData.metadata.size"
-      :rowsPerPageOptions="[10, 20, 50, 100]"
-      :totalRecords="tableData.metadata.total"
-      @page="handlePageChange"
-      lazy
-      scrollable
-    >
-      <template #header>
-        <div class="flex flex-wrap items-center">
-          <Button icon="pi pi-refresh" @click="fetchData" label="刷新" size="small" />
-          <Button class="ml-4" icon="pi pi-plus" @click="createWallet" label="创建" size="small" />
-          <div class="flex-1"></div>
-          <IconField>
-            <InputIcon>
-              <i class="pi pi-search" />
-            </InputIcon>
-            <InputText v-model="search" placeholder="搜素" />
-          </IconField>
-        </div>
-      </template>
-      <Column field="address" header="地址"></Column>
-      <Column field="privateKey" header="私钥"></Column>
-      <Column field="chain" header="链"></Column>
-      <Column field="createdAt" header="创建时间" style="min-width: 200px">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.createdAt) }}
-        </template>
-      </Column>
-    </DataTable>
-  </div>
-</template>

+ 3 - 0
vite.config.js

@@ -9,6 +9,9 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx(), vueDevTools(), tailwindcss()],
+  server: {
+    port: 5175
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))