jlocal/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tool UI consistency and default styling

Browse Source
This commit is contained in:
jingrow 2025-11-21 21:12:01 +08:00
parent 83baec614d
commit 47517a1e55
4 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/jingrow/frontend/src/locales/zh-CN.json
View File

@ -1077,6 +1077,8 @@
"Internal path: /example": "内部路径：/example", "Internal path: /example": "内部路径：/example",
"External link: starts with http:// or https://": "外部链接：以 http:// 或 https:// 开头", "External link: starts with http:// or https://": "外部链接：以 http:// 或 https:// 开头",
"Please enter tool name": "请输入工具名称", "Please enter tool name": "请输入工具名称",
"Please enter tool title": "请输入工具标题",
"Enter tool title": "请输入工具标题",
"Please select tool type": "请选择工具类型", "Please select tool type": "请选择工具类型",
"Please enter route name": "请输入路由名", "Please enter route name": "请输入路由名",
"Please enter URL": "请输入URL", "Please enter URL": "请输入URL",

26
apps/jingrow/frontend/src/views/Tools.vue
View File

@ -45,14 +45,14 @@
<div class="tool-card-content" @click="handleOpenTool(tool)"> <div class="tool-card-content" @click="handleOpenTool(tool)">
<div <div
class="tool-icon" class="tool-icon"
:class="{ 'default-tool-icon': tool.isDefault }" :class="{ 'default-tool-icon': tool.isDefault || !tool.color || tool.color === '' }"
:style="tool.isDefault :style="(tool.isDefault || !tool.color || tool.color === '')
? { borderColor: tool.color || '#e5e7eb' } ? { borderColor: tool.color || '#e5e7eb' }
: { backgroundColor: tool.color || '#1fc76f' }" : { backgroundColor: tool.color }"
> >
<DynamicIcon :name="tool.icon || 'tool'" :size="32" :color="tool.isDefault ? '#64748b' : 'white'" /> <DynamicIcon :name="tool.icon || 'tool'" :size="32" :color="(tool.isDefault || !tool.color || tool.color === '') ? '#64748b' : 'white'" />
</div> </div>
<div class="tool-name" :class="{ 'default-tool-name': tool.isDefault }">{{ tool.name }}</div> <div class="tool-name" :class="{ 'default-tool-name': tool.isDefault || !tool.color || tool.color === '' }">{{ tool.name }}</div>
</div> </div>
<n-dropdown <n-dropdown
trigger="click" trigger="click"
@ -87,12 +87,12 @@
> >
<div <div
class="hidden-tool-icon" class="hidden-tool-icon"
:class="{ 'default-tool-icon': tool.isDefault }" :class="{ 'default-tool-icon': tool.isDefault || !tool.color || tool.color === '' }"
:style="tool.isDefault :style="(tool.isDefault || !tool.color || tool.color === '')
? { borderColor: tool.color || '#e5e7eb' } ? { borderColor: tool.color || '#e5e7eb' }
: { backgroundColor: tool.color || '#1fc76f' }" : { backgroundColor: tool.color }"
> >
<DynamicIcon :name="tool.icon || 'tool'" :size="24" :color="tool.isDefault ? '#64748b' : 'white'" /> <DynamicIcon :name="tool.icon || 'tool'" :size="24" :color="(tool.isDefault || !tool.color || tool.color === '') ? '#64748b' : 'white'" />
</div> </div>
<div class="hidden-tool-name">{{ tool.name }}</div> <div class="hidden-tool-name">{{ tool.name }}</div>
<button class="show-tool-btn" @click.stop="handleShowDefaultTool(tool.id)"> <button class="show-tool-btn" @click.stop="handleShowDefaultTool(tool.id)">
@ -107,8 +107,8 @@
<!-- 添加/编辑工具对话框 --> <!-- 添加/编辑工具对话框 -->
<n-modal v-model:show="showToolModal" preset="dialog" :title="editingTool ? t('Edit Tool') : t('Add Tool')"> <n-modal v-model:show="showToolModal" preset="dialog" :title="editingTool ? t('Edit Tool') : t('Add Tool')">
<n-form :model="toolForm" :rules="toolFormRules" label-width="100" ref="toolFormRef"> <n-form :model="toolForm" :rules="toolFormRules" label-width="100" ref="toolFormRef">
<n-form-item :label="t('Tool Name')" path="name"> <n-form-item :label="t('Title')" path="name">
<n-input v-model:value="toolForm.name" :placeholder="t('Enter tool name')" /> <n-input v-model:value="toolForm.name" :placeholder="t('Enter tool title')" />
</n-form-item> </n-form-item>
<n-form-item :label="t('Description')" path="description"> <n-form-item :label="t('Description')" path="description">
<n-input <n-input
@ -202,7 +202,7 @@ const toolForm = ref<Partial<Tool>>({
}) })
const toolFormRules: FormRules = { const toolFormRules: FormRules = {
name: [{ required: true, message: t('Please enter tool name') }], name: [{ required: true, message: t('Please enter tool title') }],
routeName: [ routeName: [
{ {
required: true, required: true,
@ -332,7 +332,7 @@ function handleEditTool(tool: Tool) {
function handleSaveTool() { function handleSaveTool() {
// 先手动验证必填字段 // 先手动验证必填字段
if (!toolForm.value.name || !toolForm.value.name.trim()) { if (!toolForm.value.name || !toolForm.value.name.trim()) {
message.error(t('Please enter tool name')) message.error(t('Please enter tool title'))
return return
} }

2
apps/jingrow/frontend/src/views/dev/ToolDetail.vue
View File

@ -333,7 +333,7 @@ async function performInstall() {
description: tool.value.description, description: tool.value.description,
category: tool.value.category, category: tool.value.category,
icon: tool.value.icon, icon: tool.value.icon,
color: tool.value.color || '#e5e7eb', color: tool.value.color || undefined, // 如果为空，不设置默认值，使用 undefined
type: 'route' as const, type: 'route' as const,
routeName: tool.value.route_name, // 可能不存在，会在 addUserTool 中自动生成 routeName: tool.value.route_name, // 可能不存在，会在 addUserTool 中自动生成
isDefault: false, isDefault: false,

2
apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
View File

@ -346,7 +346,7 @@ async function performInstall(tool: any) {
description: tool.description, description: tool.description,
category: tool.category, category: tool.category,
icon: tool.icon, icon: tool.icon,
color: tool.color || '#e5e7eb', color: tool.color || undefined, // 如果为空，不设置默认值，使用 undefined
type: 'route' as const, type: 'route' as const,
routeName: tool.route_name, // 可能不存在，会在 addUserTool 中自动生成 routeName: tool.route_name, // 可能不存在，会在 addUserTool 中自动生成
isDefault: false, isDefault: false,