Skip to content

Commit 66577c9

Browse files
InneiInnei
committed
refactor: replace NInput with BorderlessInput in summary and translation lists
- Updated the SummaryList and TranslationList components to use BorderlessInput for search functionality, enhancing the UI consistency. - Removed unnecessary total count display and related elements to streamline the layout. - Improved the overall user experience by simplifying the search input design. Signed-off-by: Innei <tukon479@gmail.com>
1 parent d923b79 commit 66577c9

3 files changed

Lines changed: 70 additions & 53 deletions

File tree

‎src/components/input/borderless-input.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { NInput } from 'naive-ui'
2+
import { defineComponent } from 'vue'
3+
import type { InputProps } from 'naive-ui'
4+
import type { PropType } from 'vue'
5+
6+
const borderlessThemeOverrides: InputProps['themeOverrides'] = {
7+
border: 'none',
8+
borderHover: 'none',
9+
borderFocus: 'none',
10+
boxShadowFocus: 'none',
11+
color: 'transparent',
12+
colorFocus: 'transparent',
13+
}
14+
15+
export const BorderlessInput = defineComponent({
16+
name: 'BorderlessInput',
17+
props: {
18+
value: { type: String, default: '' },
19+
onUpdateValue: {
20+
type: Function as PropType<(value: string) => void>,
21+
},
22+
placeholder: { type: String },
23+
clearable: { type: Boolean, default: false },
24+
inputProps: { type: Object as PropType<Record<string, unknown>> },
25+
},
26+
setup(props, { slots }) {
27+
return () => (
28+
<NInput
29+
value={props.value}
30+
onUpdateValue={props.onUpdateValue}
31+
placeholder={props.placeholder}
32+
clearable={props.clearable}
33+
themeOverrides={borderlessThemeOverrides}
34+
inputProps={props.inputProps}
35+
>
36+
{slots}
37+
</NInput>
38+
)
39+
},
40+
})

‎src/views/ai/components/summary-list.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import {
33
Inbox as InboxIcon,
44
LoaderIcon,
55
Search as SearchIcon,
6-
Sparkles as SparklesIcon,
76
StickyNote as StickyNoteIcon,
87
} from 'lucide-vue-next'
9-
import { NInput, NScrollbar } from 'naive-ui'
8+
import { NScrollbar } from 'naive-ui'
109
import { computed, defineComponent, ref, watch } from 'vue'
1110
import type { ArticleInfo, GroupedSummaryData } from '~/api/ai'
1211
import type { PropType } from 'vue'
1312

1413
import { refDebounced } from '@vueuse/core'
1514

15+
import { BorderlessInput } from '~/components/input/borderless-input'
16+
1617
type ArticleRefType = ArticleInfo['type']
1718

1819
const RefTypeLabels: Record<ArticleRefType, string> = {
@@ -72,7 +73,6 @@ export const SummaryList = defineComponent({
7273
},
7374
},
7475
setup(props) {
75-
const totalCount = computed(() => props.pager?.total ?? props.data.length)
7676
const searchInputValue = ref('')
7777
const debouncedSearch = refDebounced(searchInputValue, 300)
7878

@@ -97,20 +97,9 @@ export const SummaryList = defineComponent({
9797

9898
return () => (
9999
<div class="flex h-full flex-col">
100-
<div class="flex h-12 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
101-
<span class="flex items-center gap-1.5 text-base font-semibold text-neutral-900 dark:text-neutral-100">
102-
<SparklesIcon class="h-4 w-4" />
103-
AI 摘要
104-
</span>
105-
{totalCount.value > 0 && (
106-
<span class="text-xs text-neutral-400">
107-
{totalCount.value} 篇文章
108-
</span>
109-
)}
110-
</div>
111-
112-
<div class="flex flex-shrink-0 flex-col gap-2 border-b border-neutral-100 px-4 py-2 dark:border-neutral-800/50">
113-
<NInput
100+
<div class="flex h-12 flex-shrink-0 items-center gap-2 border-b border-neutral-200 px-4 py-2 dark:border-neutral-800">
101+
<BorderlessInput
102+
class="-mx-4 flex-1"
114103
value={searchInputValue.value}
115104
onUpdateValue={(val) => (searchInputValue.value = val)}
116105
placeholder="输入文章标题关键词"
@@ -125,7 +114,7 @@ export const SummaryList = defineComponent({
125114
{{
126115
prefix: () => <SearchIcon class="size-4 text-neutral-400" />,
127116
}}
128-
</NInput>
117+
</BorderlessInput>
129118
</div>
130119

131120
<div class="min-h-0 flex-1">

‎src/views/ai/components/translation-list.tsx‎

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import {
22
FileText as FileTextIcon,
33
Inbox as InboxIcon,
4-
Languages as LanguagesIcon,
54
LoaderIcon,
65
Plus as PlusIcon,
76
Search as SearchIcon,
87
StickyNote as StickyNoteIcon,
98
} from 'lucide-vue-next'
10-
import { NButton, NInput, NScrollbar, NTooltip } from 'naive-ui'
9+
import { NButton, NScrollbar, NTooltip } from 'naive-ui'
1110
import { computed, defineComponent, ref, watch } from 'vue'
1211
import type { ArticleInfo, GroupedTranslationData } from '~/api/ai'
1312
import type { PropType } from 'vue'
1413

1514
import { refDebounced } from '@vueuse/core'
1615

16+
import { BorderlessInput } from '~/components/input/borderless-input'
17+
1718
import { ArticleSelectorModal } from './article-selector-modal'
1819

1920
type ArticleRefType = ArticleInfo['type']
@@ -78,7 +79,6 @@ export const TranslationList = defineComponent({
7879
},
7980
},
8081
setup(props) {
81-
const totalCount = computed(() => props.pager?.total ?? props.data.length)
8282
const showBatchModal = ref(false)
8383
const searchInputValue = ref('')
8484
const debouncedSearch = refDebounced(searchInputValue, 300)
@@ -108,43 +108,15 @@ export const TranslationList = defineComponent({
108108

109109
return () => (
110110
<div class="flex h-full flex-col">
111-
<div class="flex h-12 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
112-
<span class="flex items-center gap-1.5 text-base font-semibold text-neutral-900 dark:text-neutral-100">
113-
<LanguagesIcon class="h-4 w-4" />
114-
AI 翻译
115-
</span>
116-
<div class="flex items-center gap-2">
117-
{totalCount.value > 0 && (
118-
<span class="text-xs text-neutral-400">
119-
{totalCount.value} 篇
120-
</span>
121-
)}
122-
<NTooltip>
123-
{{
124-
trigger: () => (
125-
<NButton
126-
size="tiny"
127-
quaternary
128-
circle
129-
onClick={() => (showBatchModal.value = true)}
130-
>
131-
<PlusIcon class="size-4" />
132-
</NButton>
133-
),
134-
default: () => '批量生成翻译',
135-
}}
136-
</NTooltip>
137-
</div>
138-
</div>
139-
140111
<ArticleSelectorModal
141112
show={showBatchModal.value}
142113
onClose={() => (showBatchModal.value = false)}
143114
onSuccess={handleBatchSuccess}
144115
/>
145116

146-
<div class="flex flex-shrink-0 flex-col gap-2 border-b border-neutral-100 px-4 py-2 dark:border-neutral-800/50">
147-
<NInput
117+
<div class="flex h-12 flex-shrink-0 items-center gap-2 border-b border-neutral-200 px-4 py-2 dark:border-neutral-800">
118+
<BorderlessInput
119+
class="-mx-4 flex-1"
148120
value={searchInputValue.value}
149121
onUpdateValue={(val) => (searchInputValue.value = val)}
150122
placeholder="输入文章标题关键词"
@@ -159,7 +131,23 @@ export const TranslationList = defineComponent({
159131
{{
160132
prefix: () => <SearchIcon class="size-4 text-neutral-400" />,
161133
}}
162-
</NInput>
134+
</BorderlessInput>
135+
136+
<NTooltip>
137+
{{
138+
trigger: () => (
139+
<NButton
140+
size="tiny"
141+
quaternary
142+
circle
143+
onClick={() => (showBatchModal.value = true)}
144+
>
145+
<PlusIcon class="size-4" />
146+
</NButton>
147+
),
148+
default: () => '批量生成翻译',
149+
}}
150+
</NTooltip>
163151
</div>
164152

165153
<div class="min-h-0 flex-1">

0 commit comments

Comments
 (0)