feat: reoede web to tailwindcss

web/src/components/pages/settings/AboutSettings.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Github, FileText } from 'lucide-vue-next'
+import { request } from '@/api/api'
+import { toast } from 'vue-sonner'
+
+const state = reactive({
+  version: '1.0.0',
+  description: '一个现代化的消息推送管理平台，支持多种推送渠道和灵活的消息管理功能。',
+  features: [
+    '多渠道消息推送',
+    '定时消息管理', 
+    '托管消息服务',
+    '发信日志追踪',
+    '渠道配置管理'
+  ],
+  techStack: ['Vue 3', 'TypeScript', 'Vite', 'Tailwind CSS', 'Shadcn/ui'],
+  githubUrl: 'https://github.com/engigu/Message-Push-Nest',
+  copyright: '保留所有权利.',
+  versionLog: ''
+})
+
+// 获取关于页面配置
+const getAboutConfig = async () => {
+  try {
+    const params = { params: { section: 'about' } }
+    const response = await request.get('/settings/getsetting', params)
+    if (response.data.code === 200) {
+      const data = response.data.data
+      if (data.version) state.version = data.version
+      if (data.desc) state.versionLog = data.desc
+    }
+  } catch (error) {
+    toast.error('获取关于信息失败')
+  }
+}
+
+onMounted(() => {
+  getAboutConfig()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AboutSettings'
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>站点关于</CardTitle>
+      <CardDescription>{{ state.description }}</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <div>
+            <h3 class="font-medium text-gray-900 mb-2">技术栈</h3>
+            <div class="flex flex-wrap gap-2">
+              <Badge v-for="tech in state.techStack" :key="tech">{{ tech }}</Badge>
+            </div>
+          </div>
+          
+          <div>
+            <h3 class="font-medium text-gray-900 mb-2">功能特性</h3>
+            <ul class="text-sm text-gray-600 space-y-1">
+              <li v-for="feature in state.features" :key="feature">• {{ feature }}</li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <h3 class="font-medium text-gray-900 mb-2">系统信息</h3>
+            <div class="space-y-2 text-sm">
+              <div class="flex justify-between">
+                <span class="text-gray-600">版本:</span>
+                <Badge variant="outline">{{ state.version }}</Badge>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600">运行环境:</span>
+                <span>Vue 3 + TypeScript</span>
+              </div>
+            </div>
+          </div>
+          
+          <div>
+            <h3 class="font-medium text-gray-900 mb-2">版本日志</h3>
+            <Sheet>
+              <SheetTrigger as-child>
+                <Button variant="outline" size="sm" class="inline-flex items-center gap-2">
+                  <FileText class="w-4 h-4" />
+                  查看更新日志
+                </Button>
+              </SheetTrigger>
+              <SheetContent class="w-[600px] sm:w-[800px]">
+                <SheetHeader>
+                  <SheetTitle>版本更新日志</SheetTitle>
+                </SheetHeader>
+                <div class="mt-6">
+                  <div class="bg-gray-50 p-4 rounded-lg">
+                    <pre class="whitespace-pre-wrap text-sm font-mono">{{ state.versionLog }}</pre>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+      
+      <div class="border-t border-gray-200 my-4"></div>
+      
+      <div class="text-center text-sm text-gray-500">
+        <p>© {{ new Date().getFullYear() }} {{ state.copyright }}</p>
+        <p class="mt-1">如有问题请联系系统管理员</p>
+        <p class="mt-2">
+          <a :href="state.githubUrl" target="_blank" class="inline-flex items-center gap-1 text-blue-500 hover:text-blue-700 underline">
+            <Github class="w-4 h-4" />
+            GitHub 仓库
+          </a>
+        </p>
+      </div>
+    </CardContent>
+  </Card>
+</template>

web/src/components/pages/settings/LogsSettings.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { toast } from 'vue-sonner'
+import { request } from '@/api/api'
+import { useRouter } from 'vue-router'
+import { CONSTANT } from '@/constant'
+import { HelpCircleIcon } from 'lucide-vue-next'
+
+const router = useRouter()
+
+const state = reactive({
+  section: 'log_config',
+  cron: '',
+  keepNum: '1000',
+})
+
+// 提交配置
+const handleSubmit = async () => {
+  try {
+    const postData = {
+      section: state.section,
+      data: {
+        cron: state.cron.trim(),
+        keep_num: state.keepNum.trim(),
+      },
+    }
+    const response = await request.post('/settings/set', postData)
+    if (response.data.code === 200) {
+      const msg = response.data.msg
+      toast.success(msg)
+    }
+  } catch (error) {
+    toast.error('保存失败，请稍后重试')
+  }
+}
+
+// 查看日志
+const handleView = async () => {
+  router.push({ path: '/sendlogs', query: { taskid: CONSTANT.LOG_TASK_ID } })
+}
+
+// 获取站点配置
+const getSiteConfig = async () => {
+  try {
+    const params = { params: { section: 'log_config' } }
+    const response = await request.get('/settings/getsetting', params)
+    if (response.data.code === 200) {
+      const data = response.data.data
+      state.cron = data.cron || ''
+      state.keepNum = data.keep_num || '1000'
+    }
+  } catch (error) {
+    toast.error('获取配置失败')
+  }
+}
+
+onMounted(() => {
+  getSiteConfig()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LogsSettings'
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>日志设置</CardTitle>
+      <CardDescription>配置定时日志清除和保留策略</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="setting-container">
+        <div class="space-y-4">
+          <!-- Cron表达式输入 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">定时清除Cron表达式</label>
+            <div class="flex">
+              <!-- <div class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 border border-r-0 border-gray-300 rounded-l-md">
+                cron://
+              </div> -->
+              <Input 
+                v-model="state.cron" 
+                placeholder="请输入定时日志清除的Cron表达式"
+              />
+            </div>
+          </div>
+          
+          <!-- 保留数量输入 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">保留日志条数</label>
+            <div class="flex">
+              <!-- <div class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 border border-r-0 border-gray-300 rounded-l-md">
+                保留数
+              </div> -->
+              <Input 
+                v-model="state.keepNum" 
+                placeholder="请输入要保留的最近的日志条数"
+               
+              />
+            </div>
+          </div>
+        </div>
+        
+        <!-- 底部操作区域 -->
+        <div class="flex items-center justify-between mt-6">
+          <div class="flex items-center space-x-2">
+            <span class="text-sm text-gray-600">说明</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <HelpCircleIcon class="w-4 h-4 text-gray-400 hover:text-gray-600" />
+                </TooltipTrigger>
+                <TooltipContent class="max-w-xs">
+                  <div class="text-sm">
+                    <p>cron如果不设置，默认是在每天的0点1分进行清理</p>
+                    <p class="mt-1">保留数目如果不设置，默认保留最近1000条</p>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          
+          <div class="flex space-x-2">
+            <Button variant="outline" size="sm" @click="handleView">
+              查看日志
+            </Button>
+            <Button size="sm" @click="handleSubmit">
+              确定
+            </Button>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+

web/src/components/pages/settings/PasswordSettings.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { toast } from 'vue-sonner'
+import { request } from '@/api/api'
+
+// 重置密码相关
+const passwordForm = ref({
+  newPassword: '',
+  currentPassword: ''
+})
+
+// 重置密码
+const resetPassword = async () => {
+
+  
+  // 检查演示模式
+    // @ts-ignore
+  const isDemoMode = (import.meta as any).env.VITE_RUN_MODE === 'demo'
+  
+  if (isDemoMode) {
+    toast.error('演示模式下无法重置密码')
+    return
+  }
+
+  try {
+    let postData = { new_passwd: passwordForm.value.newPassword , old_passwd: passwordForm.value.currentPassword}
+    const rsp = await request.post('/settings/setpasswd', postData)
+    if (rsp.data.code == 200) {
+      let msg = rsp.data.msg
+      toast.success(msg)
+    } else {
+      toast.error(rsp.data.msg || '密码重置失败')
+    }
+  } catch (error) {
+    toast.error('密码重置失败，请稍后重试')
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PasswordSettings'
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>重置密码</CardTitle>
+      <CardDescription>更改您的登录密码</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+
+      <div class="space-y-2">
+        <Label for="current-password">旧密码</Label>
+        <Input
+          id="current-password"
+          type="password"
+          v-model="passwordForm.currentPassword"
+          placeholder="请输入旧密码"
+        />
+      </div>  
+        <div class="space-y-2">
+        <Label for="new-password">新密码</Label>
+        <Input
+          id="new-password"
+          type="password"
+          v-model="passwordForm.newPassword"
+          placeholder="请输入新密码"
+        />
+      </div>
+ 
+      <Button @click="resetPassword" class="w-full sm:w-auto">
+        重置密码
+      </Button>
+    </CardContent>
+  </Card>
+</template>

web/src/components/pages/settings/Settings.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SettingsSidebar from './SettingsSidebar.vue'
+import PasswordSettings from './PasswordSettings.vue'
+import LogsSettings from './LogsSettings.vue'
+import SiteSettings from './SiteSettings.vue'
+import AboutSettings from './AboutSettings.vue'
+
+// 当前选中的设置项
+const activeTab = ref('password')
+</script>
+
+<template>
+  <div class="p-6 w-full max-w-6xl mx-auto">
+    <div class="flex flex-col lg:flex-row gap-6">
+      <!-- 侧边栏 -->
+      <SettingsSidebar 
+        :active-tab="activeTab" 
+        @update:active-tab="activeTab = $event" 
+      />
+
+      <!-- 主内容区域 -->
+      <div class="flex-1">
+        <!-- 重置密码 -->
+        <PasswordSettings v-if="activeTab === 'password'" />
+
+        <!-- 日志清理 -->
+        <LogsSettings v-if="activeTab === 'logs'" />
+
+        <!-- 站点设置 -->
+        <SiteSettings v-if="activeTab === 'site'" />
+
+        <!-- 站点关于 -->
+        <AboutSettings v-if="activeTab === 'about'" />
+      </div>
+    </div>
+  </div>
+</template>

web/src/components/pages/settings/SettingsSidebar.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { KeyIcon, TrashIcon, SettingsIcon, InfoIcon } from 'lucide-vue-next'
+
+// 定义props
+interface Props {
+  activeTab: string
+}
+
+// 定义emits
+interface Emits {
+  (e: 'update:activeTab', value: string): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+
+// 设置菜单项
+const settingsMenu = [
+  { id: 'password', name: '重置密码', icon: KeyIcon },
+  { id: 'logs', name: '日志清理', icon: TrashIcon },
+  { id: 'site', name: '站点设置', icon: SettingsIcon },
+  { id: 'about', name: '站点关于', icon: InfoIcon }
+]
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SettingsSidebar'
+}
+</script>
+
+<template>
+  <div class="lg:w-64 flex-shrink-0">
+    <Card>
+      <CardHeader>
+        <CardTitle class="text-lg">设置</CardTitle>
+        <CardDescription>管理系统配置和偏好</CardDescription>
+      </CardHeader>
+      <CardContent class="p-0">
+        <nav class="space-y-1">
+          <button
+            v-for="item in settingsMenu"
+            :key="item.id"
+            @click="$emit('update:activeTab', item.id)"
+            :class="[
+              'w-full flex items-center px-4 py-3 text-left text-sm font-medium transition-colors',
+              activeTab === item.id
+                ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-700'
+                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+            ]"
+          >
+            <component :is="item.icon" class="mr-3 w-5 h-5" />
+            {{ item.name }}
+          </button>
+        </nav>
+      </CardContent>
+    </Card>
+  </div>
+</template>

web/src/components/pages/settings/SiteSettings.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { toast } from 'vue-sonner'
+import { request } from '@/api/api'
+// @ts-ignore
+import { LocalStieConfigUtils } from '@/util/localSiteConfig'
+import { HelpCircleIcon } from 'lucide-vue-next'
+
+const state = reactive({
+  title: '',
+  slogan: '',
+  logo: '',
+  pagesize: '',
+  section: 'site_config',
+})
+
+// 提交设置
+const handleSubmit = async () => {
+  try {
+    const postData = {
+      section: state.section,
+      data: {
+        title: state.title.trim(),
+        slogan: state.slogan.trim(),
+        logo: state.logo.trim(),
+        pagesize: state.pagesize,
+      },
+    }
+    const response = await request.post('/settings/set', postData)
+    if (response.data.code === 200) {
+      const msg = response.data.msg
+      toast.success(msg)
+    }
+  } catch (error) {
+    toast.error('保存失败，请稍后重试')
+  }
+}
+
+// 恢复默认设置
+const handleSubmitReset = async () => {
+  try {
+    const response = await request.post('/settings/reset', {})
+    if (response.data.code === 200) {
+      const msg = response.data.msg
+      toast.success(msg)
+      // 重新获取设置
+      await getSiteConfig()
+    }
+  } catch (error) {
+    toast.error('恢复默认设置失败，请稍后重试')
+  }
+}
+
+// 获取站点配置
+const getSiteConfig = async () => {
+  try {
+    const params = { params: { section: 'site_config' } }
+    const response = await request.get('/settings/getsetting', params)
+    if (response.data.code === 200) {
+      const data = response.data.data
+      state.title = data.title || ''
+      state.logo = data.logo || ''
+      state.slogan = data.slogan || ''
+      state.pagesize = data.pagesize || ''
+
+      LocalStieConfigUtils.updateLocalConfig(data)
+    }
+  } catch (error) {
+    toast.error('获取配置失败')
+  }
+}
+
+onMounted(() => {
+  getSiteConfig()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SiteSettings'
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>站点设置</CardTitle>
+      <CardDescription>配置站点基本信息和参数</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="setting-container">
+        <div class="space-y-4">
+          <!-- 站点标题 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">站点标题</label>
+            <Input v-model="state.title" placeholder="请输入自定义的网站标题" />
+          </div>
+
+          <!-- 站点标语 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">站点标语</label>
+            <Input v-model="state.slogan" placeholder="请输入自定义的网站slogan" />
+          </div>
+
+          <!-- 站点图标 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">站点图标</label>
+            <Input v-model="state.logo" placeholder="请输入自定义的网站logo（svg文本）" />
+            <!-- SVG预览 -->
+            <div v-if="state.logo" class="mt-2 p-3 border border-gray-200 rounded-md bg-gray-50">
+              <div class="text-xs text-gray-500 mb-2">预览效果：</div>
+              <div class="flex items-center justify-center w-16 h-16 bg-white border border-gray-300 rounded"
+                v-html="state.logo"></div>
+            </div>
+          </div>
+
+          <!-- 分页大小 -->
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700">分页大小</label>
+            <Input v-model="state.pagesize" placeholder="页面分页大小" />
+          </div>
+        </div>
+
+        <!-- 底部操作区域 -->
+        <div class="flex items-center justify-between mt-6">
+          <div class="flex items-center space-x-2">
+            <span class="text-sm text-gray-600">说明</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <HelpCircleIcon class="w-4 h-4 text-gray-400 hover:text-gray-600" />
+                </TooltipTrigger>
+                <TooltipContent class="max-w-sm">
+                  <div class="text-sm space-y-1">
+                    <p>1. logo请输入svg文本，替换后登录页面，ico，导航栏logo将全部一起更换</p>
+                    <p>2. slogan将在登录页面展示</p>
+                    <p>** 将在下一次登录的时候生效，如果不生效请在登录页面Ctrl+F5强制刷新</p>
+                    <p>** logo将替换网页ico，登录页面logo，导航栏logo</p>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+
+          <div class="flex space-x-2">
+            <Button variant="outline" size="sm" @click="handleSubmitReset">
+              恢复默认
+            </Button>
+            <Button size="sm" @click="handleSubmit">
+              确定
+            </Button>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+
+<style scoped>
+.setting-container {
+  max-width: 500px;
+}
+</style>