tradewind/toolbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#feature: update layout

Browse Source
This commit is contained in:
tradewind
2025-12-25 19:16:41 +08:00
parent cd11a856bb
commit cd1e3d4859
3 changed files with 362 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
resources/js/components/admin/SystemSettings.vue
View File

@@ -4,9 +4,9 @@
<div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<div>
<h3 class="text-lg font-bold text-gray-800">系统设置</h3>
<p class="text-xs text-gray-500">管理本地偏好与服务端全局配置</p>
<p class="text-sm text-gray-500">管理本地偏好与服务端全局配置</p>
</div>
<div v-if="jira.loading || configs.loading" class="text-xs text-blue-600 animate-pulse">
<div v-if="jira.loading || configs.loading" class="text-sm text-blue-600 animate-pulse">
数据同步中...
</div>
</div>
@@ -18,24 +18,24 @@
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex justify-between items-center">
<h4 class="font-semibold text-gray-700 text-sm">JIRA 偏好</h4>
<span class="text-[10px] text-gray-400 uppercase tracking-wider">Local</span>
<span class="text-xs text-gray-400 uppercase tracking-wider">Local</span>
</div>
<div class="p-4 space-y-4">
<!-- Default User Input -->
<div>
<label class="block text-xs font-medium text-gray-600 mb-1">默认查询用户 (本地)</label>
<div class="flex gap-1">
<label class="block text-sm font-medium text-gray-600 mb-1">默认查询用户 (本地)</label>
<div class="flex gap-2">
<input
type="text"
v-model="jira.localDefaultQueryUserDraft"
class="flex-1 min-w-0 block w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
class="flex-1 min-w-0 block w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
placeholder="如: zhangsan"
/>
<button
@click="save"
:disabled="jira.saving"
class="px-3 py-1.5 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 disabled:opacity-50 transition-colors"
class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 disabled:opacity-50 transition-colors"
title="保存本地设置"
>
<svg v-if="!jira.saving" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
@@ -46,7 +46,7 @@
<button
@click="clear"
:disabled="jira.saving"
class="px-2 py-1.5 bg-gray-100 text-gray-600 text-xs font-medium rounded hover:bg-gray-200 disabled:opacity-50 transition-colors"
class="px-2 py-2 bg-gray-100 text-gray-600 text-sm font-medium rounded hover:bg-gray-200 disabled:opacity-50 transition-colors"
title="清除并使用默认值"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
@@ -54,32 +54,32 @@
</svg>
</button>
</div>
<p class="mt-1 text-[10px] text-gray-400">留空则使用服务端默认值。</p>
<p class="mt-1 text-xs text-gray-400">留空则使用服务端默认值。</p>
</div>
<!-- Messages -->
<div v-if="jira.message" class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded border border-green-100 flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3">
<div v-if="jira.message" class="text-sm text-green-600 bg-green-50 px-3 py-2 rounded border border-green-100 flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
{{ jira.message }}
</div>
<div v-if="jira.error" class="text-xs text-red-600 bg-red-50 px-2 py-1 rounded border border-red-100">
<div v-if="jira.error" class="text-sm text-red-600 bg-red-50 px-3 py-2 rounded border border-red-100">
{{ jira.error }}
</div>
<!-- Server Info Compact -->
<div class="bg-gray-50 rounded border border-gray-200 p-3 space-y-2">
<div class="flex justify-between items-center text-xs">
<div class="bg-gray-50 rounded border border-gray-200 p-4 space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-500">生效用户:</span>
<span class="font-mono font-medium text-gray-800 bg-white px-1.5 py-0.5 rounded border border-gray-200">{{ effectiveDefaultQueryUser || '-' }}</span>
<span class="font-mono font-medium text-gray-800 bg-white px-2 py-0.5 rounded border border-gray-200">{{ effectiveDefaultQueryUser || '-' }}</span>
</div>
<div class="border-t border-gray-200 my-1"></div>
<div class="flex justify-between items-center text-xs">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-500">服务端默认:</span>
<span class="font-mono text-gray-700">{{ jira.serverDefaultUser || '-' }}</span>
</div>
<div class="flex justify-between items-start text-xs gap-2">
<div class="flex justify-between items-start text-sm gap-2">
<span class="text-gray-500 shrink-0">Host:</span>
<span class="font-mono text-gray-700 text-right break-all">{{ jira.host || '-' }}</span>
</div>
@@ -99,7 +99,7 @@
v-if="isAdmin"
@click="loadConfigs"
:disabled="configs.loading"
class="text-gray-500 hover:text-blue-600 transition-colors p-1 rounded hover:bg-gray-200"
class="text-gray-500 hover:text-blue-600 transition-colors p-1.5 rounded hover:bg-gray-200"
title="刷新列表"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4" :class="{'animate-spin': configs.loading}">
@@ -117,42 +117,42 @@
<!-- Admin Content -->
<div v-else class="flex-1 flex flex-col min-h-0">
<!-- Status Messages -->
<div v-if="configs.message" class="mx-4 mt-4 text-xs text-green-600 bg-green-50 px-2 py-1.5 rounded border border-green-100">
<div v-if="configs.message" class="mx-4 mt-4 text-sm text-green-600 bg-green-50 px-3 py-2 rounded border border-green-100">
{{ configs.message }}
</div>
<div v-if="configs.error" class="mx-4 mt-4 text-xs text-red-600 bg-red-50 px-2 py-1.5 rounded border border-red-100">
<div v-if="configs.error" class="mx-4 mt-4 text-sm text-red-600 bg-red-50 px-3 py-2 rounded border border-red-100">
{{ configs.error }}
</div>
<!-- Add New Config Form -->
<div class="p-4 bg-white border-b border-gray-100">
<div class="flex flex-col md:flex-row gap-2 items-start md:items-center">
<div class="flex flex-col md:flex-row gap-3 items-start md:items-center">
<input
v-model="configs.newConfig.key"
type="text"
class="flex-1 w-full md:w-auto px-2 py-1.5 text-xs font-mono border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
class="flex-1 w-full md:w-auto px-3 py-2 text-sm font-mono border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
placeholder="Key (e.g. workspace.repo)"
/>
<input
v-model="configs.newConfig.description"
type="text"
class="flex-1 w-full md:w-auto px-2 py-1.5 text-xs border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
class="flex-1 w-full md:w-auto px-3 py-2 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
placeholder="描述"
/>
<div class="relative flex-grow-[2] w-full md:w-auto">
<input
v-model="configs.newConfig.valueText"
type="text"
class="w-full px-2 py-1.5 text-xs font-mono border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
class="w-full px-3 py-2 text-sm font-mono border border-gray-300 rounded focus:ring-1 focus:ring-blue-500"
placeholder='Value (JSON)'
/>
</div>
<button
@click="createConfig"
:disabled="configs.saving"
class="w-full md:w-auto px-3 py-1.5 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-1"
class="w-full md:w-auto px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
</svg>
新增
@@ -165,43 +165,43 @@
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">Key</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">描述</th>
<th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value (JSON)</th>
<th scope="col" class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-20">操作</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">Key</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">描述</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value (JSON)</th>
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-24">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr v-for="config in configs.items" :key="config.id" class="hover:bg-gray-50 group">
<td class="px-3 py-1.5 align-top">
<td class="px-4 py-2 align-top">
<input
v-model="config.key"
type="text"
class="w-full text-xs font-mono bg-transparent border-none p-0 focus:ring-0 text-gray-900 placeholder-gray-400 group-hover:bg-white focus:bg-white rounded"
class="w-full text-sm font-mono bg-transparent border-none p-0 focus:ring-0 text-gray-900 placeholder-gray-400 group-hover:bg-white focus:bg-white rounded px-1"
/>
</td>
<td class="px-3 py-1.5 align-top">
<td class="px-4 py-2 align-top">
<input
v-model="config.description"
type="text"
class="w-full text-xs bg-transparent border-none p-0 focus:ring-0 text-gray-600 group-hover:bg-white focus:bg-white rounded"
class="w-full text-sm bg-transparent border-none p-0 focus:ring-0 text-gray-600 group-hover:bg-white focus:bg-white rounded px-1"
/>
</td>
<td class="px-3 py-1.5 align-top">
<td class="px-4 py-2 align-top">
<textarea
v-model="config.valueText"
rows="1"
class="w-full text-xs font-mono bg-transparent border-transparent focus:border-blue-300 focus:ring-1 focus:ring-blue-200 text-gray-600 rounded px-1 py-0.5 resize-y min-h-[1.5rem]"
class="w-full text-sm font-mono bg-transparent border-transparent focus:border-blue-300 focus:ring-1 focus:ring-blue-200 text-gray-600 rounded px-1 py-0.5 resize-y min-h-[1.75rem]"
@focus="$event.target.rows = 3"
@blur="$event.target.rows = 1"
></textarea>
</td>
<td class="px-3 py-1.5 align-top text-right whitespace-nowrap">
<td class="px-4 py-2 align-top text-right whitespace-nowrap">
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
<button
@click="updateConfig(config)"
:disabled="config._saving"
class="p-1 text-blue-600 hover:bg-blue-50 rounded"
class="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
title="保存"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
@@ -211,7 +211,7 @@
<button
@click="deleteConfig(config)"
:disabled="config._deleting"
class="p-1 text-red-600 hover:bg-red-50 rounded"
class="p-1.5 text-red-600 hover:bg-red-50 rounded"
title="删除"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
@@ -222,7 +222,7 @@
</td>
</tr>
<tr v-if="configs.items.length === 0">
<td colspan="4" class="px-4 py-8 text-center text-xs text-gray-400">
<td colspan="4" class="px-4 py-8 text-center text-sm text-gray-400">
暂无配置数据
</td>
</tr>