style: update component styles for improved consistency and readability
This commit is contained in:
@@ -40,7 +40,7 @@ export default function KnowledgeDocsTable({
|
|||||||
trashIcon,
|
trashIcon,
|
||||||
}: KnowledgeDocsTableProps) {
|
}: KnowledgeDocsTableProps) {
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden rounded-[24px] border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
|
<div className="overflow-hidden rounded-2xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="min-w-full border-collapse">
|
<table className="min-w-full border-collapse">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@@ -19,20 +19,20 @@ export default function KnowledgePageHeader({
|
|||||||
<div className="mb-6 flex shrink-0 flex-col justify-between gap-4 md:flex-row md:items-start">
|
<div className="mb-6 flex shrink-0 flex-col justify-between gap-4 md:flex-row md:items-start">
|
||||||
<div>
|
<div>
|
||||||
<h1
|
<h1
|
||||||
className="mb-3 text-5xl font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6] md:text-6xl"
|
className="mb-3 text-4xl font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6] md:text-4xl"
|
||||||
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
|
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-[17px] font-medium text-[#171717]/70 dark:text-gray-400">{subtitle}</p>
|
<p className="text-[17px] text-[#171717]/70 dark:text-gray-400">{subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
|
<div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
|
||||||
<div className="rounded-[24px] bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
|
<div className="rounded-3xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
|
||||||
<div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
|
<div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
|
||||||
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
|
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-[24px] bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
|
<div className="rounded-3xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
|
||||||
<div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
|
<div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
|
||||||
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
|
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import type { ReactNode } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
type KnowledgeToolbarProps = {
|
type KnowledgeToolbarProps = {
|
||||||
description: string;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
refreshing: boolean;
|
refreshing: boolean;
|
||||||
uploading: boolean;
|
uploading: boolean;
|
||||||
@@ -15,7 +14,6 @@ type KnowledgeToolbarProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function KnowledgeToolbar({
|
export default function KnowledgeToolbar({
|
||||||
description,
|
|
||||||
loading,
|
loading,
|
||||||
refreshing,
|
refreshing,
|
||||||
uploading,
|
uploading,
|
||||||
@@ -29,10 +27,6 @@ export default function KnowledgeToolbar({
|
|||||||
}: KnowledgeToolbarProps) {
|
}: KnowledgeToolbarProps) {
|
||||||
return (
|
return (
|
||||||
<div className="mb-5 flex shrink-0 flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
<div className="mb-5 flex shrink-0 flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||||
<p className="max-w-2xl text-sm leading-6 text-[#525866] dark:text-gray-400">
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3 md:mt-2">
|
<div className="flex items-center gap-3 md:mt-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ const EN_KNOWLEDGE_MESSAGES: MessageTree = {
|
|||||||
subtitle: 'Upload, review, and delete local documentation files stored in the knowledge directory.',
|
subtitle: 'Upload, review, and delete local documentation files stored in the knowledge directory.',
|
||||||
refresh: 'Refresh',
|
refresh: 'Refresh',
|
||||||
upload: 'Upload document',
|
upload: 'Upload document',
|
||||||
uploadHint: 'This page fully replaces the previous Knowledge demo and now focuses on local docs only.',
|
|
||||||
documentsLabel: 'Documents',
|
documentsLabel: 'Documents',
|
||||||
storageLabel: 'Storage',
|
storageLabel: 'Storage',
|
||||||
emptyTitle: 'No documents yet',
|
emptyTitle: 'No documents yet',
|
||||||
@@ -59,7 +58,6 @@ const ZH_KNOWLEDGE_MESSAGES: MessageTree = {
|
|||||||
subtitle: '上传、查看和删除保存在知识目录中的本地文档文件。',
|
subtitle: '上传、查看和删除保存在知识目录中的本地文档文件。',
|
||||||
refresh: '刷新',
|
refresh: '刷新',
|
||||||
upload: '上传文档',
|
upload: '上传文档',
|
||||||
uploadHint: '此页面已完全替换旧 Knowledge demo,只保留本地文档管理能力。',
|
|
||||||
documentsLabel: '文档数量',
|
documentsLabel: '文档数量',
|
||||||
storageLabel: '占用空间',
|
storageLabel: '占用空间',
|
||||||
emptyTitle: '暂无文档',
|
emptyTitle: '暂无文档',
|
||||||
@@ -100,7 +98,6 @@ const JA_KNOWLEDGE_MESSAGES: MessageTree = {
|
|||||||
subtitle: 'ローカルのナレッジ文書をアップロード、確認、削除できます。',
|
subtitle: 'ローカルのナレッジ文書をアップロード、確認、削除できます。',
|
||||||
refresh: '更新',
|
refresh: '更新',
|
||||||
upload: '文書をアップロード',
|
upload: '文書をアップロード',
|
||||||
uploadHint: 'このページは旧 Knowledge デモを置き換え、ローカル文書管理に専念します。',
|
|
||||||
documentsLabel: 'Documents',
|
documentsLabel: 'Documents',
|
||||||
storageLabel: 'Storage',
|
storageLabel: 'Storage',
|
||||||
emptyTitle: '文書がありません',
|
emptyTitle: '文書がありません',
|
||||||
|
|||||||
@@ -304,7 +304,7 @@ export default function KnowledgePage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="h-full w-full min-h-0">
|
<section className="h-full w-full min-h-0">
|
||||||
<div className="relative flex h-full w-full overflow-hidden rounded-[16px] bg-white dark:bg-[#1b1b1d]">
|
<div className="relative flex h-full w-full overflow-hidden rounded-2xl bg-white dark:bg-[#1b1b1d]">
|
||||||
{feedback ? (
|
{feedback ? (
|
||||||
<KnowledgeFeedbackBanner className="absolute right-6 top-6 z-30" kind={feedback.kind}>
|
<KnowledgeFeedbackBanner className="absolute right-6 top-6 z-30" kind={feedback.kind}>
|
||||||
{feedback.message}
|
{feedback.message}
|
||||||
@@ -322,7 +322,6 @@ export default function KnowledgePage() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<KnowledgeToolbar
|
<KnowledgeToolbar
|
||||||
description={t('knowledge.uploadHint')}
|
|
||||||
loading={loading}
|
loading={loading}
|
||||||
refreshing={refreshing}
|
refreshing={refreshing}
|
||||||
uploading={uploading}
|
uploading={uploading}
|
||||||
@@ -345,7 +344,7 @@ export default function KnowledgePage() {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{loading && docs.length === 0 ? (
|
{loading && docs.length === 0 ? (
|
||||||
<div className="flex min-h-[420px] items-center justify-center rounded-[24px] border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
|
<div className="flex min-h-105 items-center justify-center rounded-3xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
|
||||||
<div className="text-center text-[#99A0AE] dark:text-gray-500">{t('knowledge.status.loading')}</div>
|
<div className="text-center text-[#99A0AE] dark:text-gray-500">{t('knowledge.status.loading')}</div>
|
||||||
</div>
|
</div>
|
||||||
) : docs.length === 0 ? (
|
) : docs.length === 0 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user