Skip to content

feat (core): 拆分独立组件 #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
qianmoQ merged 2 commits into from
Aug 10, 2025
Merged

feat (core): 拆分独立组件 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b56a86
feat (core): 构建 Tabs 组件
qianmoQ Aug 10, 2025
5d291f4
feat (core): 拆分日志配置为独立组件
qianmoQ Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 11 additions & 211 deletions src/components/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,24 @@
<template>
<Modal v-model:show="isVisible" title="设置" size="4xl" :close-on-backdrop="false" :close-on-esc="false" @close="closeSettings">
<!-- 日志设置 -->
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
<FileText class="w-5 h-5 mr-2"/>
日志设置
</h3>

<div class="space-y-4">
<!-- 当前日志目录 -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
当前日志目录
</label>
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-600 dark:text-gray-400 font-mono">
{{ currentLogDir || '加载中...' }}
</div>
</div>

<!-- 修改日志目录 -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
选择新的日志目录
</label>
<div class="flex gap-2">
<input v-model="newLogDir"
type="text"
placeholder="选择或输入日志目录路径"
class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
readonly/>

<Button type="primary"
:icon-only="true"
:icon="Folder"
@click="selectLogDirectory">
</Button>
</div>
</div>

<!-- 操作按钮 -->
<div class="flex gap-3 pt-0.5">
<Button @click="applyLogDirChange"
:disabled="!newLogDir || newLogDir === currentLogDir"
type="secondary">
应用更改
</Button>
<Button @click="openLogDirectory" type="secondary">
打开日志目录
</Button>
<Button @click="resetLogDirectory"
class="cursor-pointer px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-md transition-colors">
重置为默认
</Button>
</div>

<!-- 日志文件列表 -->
<div v-if="logFiles.length > 0">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
最近的日志文件
</label>
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 max-h-32 overflow-y-auto">
<div v-for="file in logFiles.slice(0, 5)" :key="file"
class="text-sm text-gray-600 dark:text-gray-400 font-mono py-1 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer"
@click="openLogFile(file)">
{{ file }}
</div>
</div>
</div>
</div>
</div>

<!-- 日志管理 -->
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
<Settings2 class="w-5 h-5 mr-2"/>
日志管理
</h3>

<div class="space-y-4">
<!-- 清理旧日志 -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
自动清理日志
</label>
<div class="flex items-center gap-3">
<Select v-model="keepDays"
class="w-36"
:options="keepDaysOptions"
placeholder="选择保留天数">
</Select>
<Button type="danger" @click="clearLogs">
立即清理
</Button>
</div>
</div>
</div>
</div>
<Tabs v-model="activeTab" type="card" size="md" :tabs="tabsData">
<template #general>
<General/>
</template>
</Tabs>
</Modal>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { invoke } from '@tauri-apps/api/core'
import { open as openDialog } from '@tauri-apps/plugin-dialog'
import { openPath } from '@tauri-apps/plugin-opener'
import { FileText, Folder, Settings2 } from 'lucide-vue-next'
import Select from '../ui/Select.vue'
import { useToast } from '../plugins/toast'
import Button from '../ui/Button.vue'
import { ShieldIcon } from 'lucide-vue-next'
import Modal from '../ui/Modal.vue'
import Tabs from '../ui/Tabs.vue'
import General from './setting/General.vue'

const toast = useToast()
const isVisible = ref(false)
const currentLogDir = ref('')
const newLogDir = ref('')
const logFiles = ref<string[]>([])
const keepDays = ref(30)
const keepDaysOptions = [
{ label: '保留 7 天', value: 7 },
{ label: '保留 14 天', value: 14 },
{ label: '保留 30 天', value: 30 },
{ label: '保留 90 天', value: 90 }
const activeTab = ref('general')
const tabsData = [
{ key: 'general', label: '通用', icon: ShieldIcon }
]

const emit = defineEmits<{
Expand All @@ -134,105 +32,7 @@ const closeSettings = () => {
}, 300)
}

const loadLogDirectory = async () => {
try {
const logDir = await invoke<string>('get_log_directory')
currentLogDir.value = logDir
newLogDir.value = logDir
}
catch (error) {
console.error('Failed to get current log directory:', error)
}
}

const loadLogFiles = async () => {
try {
const files = await invoke<string[]>('get_log_files')
logFiles.value = files
}
catch (error) {
console.error('Failed to get log files:', error)
}
}

const selectLogDirectory = async () => {
try {
const selected = await openDialog({
directory: true,
multiple: false,
title: '选择日志目录'
})

if (selected) {
newLogDir.value = selected as string
}
}
catch (error) {
console.error('Failed to select directory:', error)
}
}

const applyLogDirChange = async () => {
try {
await invoke('set_log_directory', { path: newLogDir.value })
currentLogDir.value = newLogDir.value
await loadLogFiles()
toast.success('日志目录已更新')
}
catch (error) {
console.error('Failed to set log directory:', error)
toast.error('日志目录更新失败, 错误信息: ' + error)
}
}

const openLogDirectory = async () => {
try {
await openPath(currentLogDir.value)
}
catch (error) {
console.error('Failed to open log directory:', error)
}
}

const resetLogDirectory = async () => {
try {
await invoke('reset_log_directory')
await loadLogDirectory()
await loadLogFiles()
toast.success('日志目录已重置为默认')
}
catch (error) {
console.error('Failed to reset log directory:', error)
toast.error('日志目录重置失败, 错误信息: ' + error)
}
}

const openLogFile = async (filename: string) => {
try {
const logPath = `${ currentLogDir.value }/${ filename }`
await openPath(logPath)
}
catch (error) {
console.error('Failed to open log file:', error)
}
}

const clearLogs = async () => {
try {
await invoke('clear_logs', { keepDays: parseInt(keepDays.value.toString()) })
await loadLogFiles()
toast.success(`已清理 ${ keepDays.value } 天前的日志`)
}
catch (error) {
console.error('Failed to clear old logs:', error)
toast.error('清理日志失败, 错误信息: ' + error)
}
}

onMounted(async () => {
await loadLogDirectory()
await loadLogFiles()

// 延迟显示动画
await nextTick()
setTimeout(() => {
Expand Down
Loading
Loading