mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-06 21:35:52 +08:00
feat(discover): implement Discover feature with routing and UI components
- Added a new Discover page with sidebar and main content areas. - Integrated routing for Discover, including subcategories and tabs. - Created components for Discover sidebar and main content. - Updated localization files to include new Discover titles and labels. - Refactored existing components to accommodate the new Discover feature. - Enhanced sidebar icons and navigation for better user experience.
This commit is contained in:
MyPrototypeWhat
parent
b629cd236d
commit
0d6156cc1b
@ -3,9 +3,11 @@
|
|||||||
"endOfLine": "lf",
|
"endOfLine": "lf",
|
||||||
"jsonRecursiveSort": true,
|
"jsonRecursiveSort": true,
|
||||||
"jsonSortOrder": "{\"*\": \"lexical\"}",
|
"jsonSortOrder": "{\"*\": \"lexical\"}",
|
||||||
"plugins": ["prettier-plugin-sort-json"],
|
"plugins": ["prettier-plugin-sort-json", "prettier-plugin-tailwindcss"],
|
||||||
"printWidth": 120,
|
"printWidth": 120,
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
|
"tailwindFunctions": ["clsx"],
|
||||||
|
"tailwindStylesheet": "./src/renderer/src/assets/styles/tailwind.css",
|
||||||
"trailingComma": "none"
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
|||||||
21
components.json
Normal file
21
components.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/renderer/src/assets/styles/tailwind.css",
|
||||||
|
"baseColor": "zinc",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@renderer/ui/third-party",
|
||||||
|
"utils": "@renderer/utils",
|
||||||
|
"ui": "@renderer/ui",
|
||||||
|
"lib": "@renderer/lib",
|
||||||
|
"hooks": "@renderer/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
@ -60,6 +60,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
renderer: {
|
renderer: {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
(async () => (await import('@tailwindcss/vite')).default())(),
|
||||||
react({
|
react({
|
||||||
tsDecorators: true,
|
tsDecorators: true,
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|||||||
@ -122,7 +122,8 @@ export default defineConfig([
|
|||||||
'.yarn/**',
|
'.yarn/**',
|
||||||
'.gitignore',
|
'.gitignore',
|
||||||
'scripts/cloudflare-worker.js',
|
'scripts/cloudflare-worker.js',
|
||||||
'src/main/integration/nutstore/sso/lib/**'
|
'src/main/integration/nutstore/sso/lib/**',
|
||||||
|
'src/renderer/src/ui/**'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|||||||
20
package.json
20
package.json
@ -132,9 +132,17 @@
|
|||||||
"@opentelemetry/sdk-trace-node": "^2.0.0",
|
"@opentelemetry/sdk-trace-node": "^2.0.0",
|
||||||
"@opentelemetry/sdk-trace-web": "^2.0.0",
|
"@opentelemetry/sdk-trace-web": "^2.0.0",
|
||||||
"@playwright/test": "^1.52.0",
|
"@playwright/test": "^1.52.0",
|
||||||
|
"@radix-ui/react-collapsible": "^1.1.10",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.14",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.14",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.11",
|
||||||
|
"@radix-ui/react-tooltip": "^1.2.7",
|
||||||
"@reduxjs/toolkit": "^2.2.5",
|
"@reduxjs/toolkit": "^2.2.5",
|
||||||
"@shikijs/markdown-it": "^3.7.0",
|
"@shikijs/markdown-it": "^3.7.0",
|
||||||
"@swc/plugin-styled-components": "^7.1.5",
|
"@swc/plugin-styled-components": "^7.1.5",
|
||||||
|
"@tailwindcss/vite": "^4.1.5",
|
||||||
"@tanstack/react-query": "^5.27.0",
|
"@tanstack/react-query": "^5.27.0",
|
||||||
"@tanstack/react-virtual": "^3.13.12",
|
"@tanstack/react-virtual": "^3.13.12",
|
||||||
"@testing-library/dom": "^10.4.0",
|
"@testing-library/dom": "^10.4.0",
|
||||||
@ -178,7 +186,9 @@
|
|||||||
"axios": "^1.7.3",
|
"axios": "^1.7.3",
|
||||||
"browser-image-compression": "^2.0.2",
|
"browser-image-compression": "^2.0.2",
|
||||||
"chardet": "^2.1.0",
|
"chardet": "^2.1.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
"cli-progress": "^3.12.0",
|
"cli-progress": "^3.12.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
"code-inspector-plugin": "^0.20.14",
|
"code-inspector-plugin": "^0.20.14",
|
||||||
"color": "^5.0.0",
|
"color": "^5.0.0",
|
||||||
"country-flag-emoji-polyfill": "0.1.8",
|
"country-flag-emoji-polyfill": "0.1.8",
|
||||||
@ -219,12 +229,13 @@
|
|||||||
"lint-staged": "^15.5.0",
|
"lint-staged": "^15.5.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"lru-cache": "^11.1.0",
|
"lru-cache": "^11.1.0",
|
||||||
"lucide-react": "^0.525.0",
|
"lucide-react": "^0.534.0",
|
||||||
"macos-release": "^3.4.0",
|
"macos-release": "^3.4.0",
|
||||||
"markdown-it": "^14.1.0",
|
"markdown-it": "^14.1.0",
|
||||||
"mermaid": "^11.7.0",
|
"mermaid": "^11.7.0",
|
||||||
"mime": "^4.0.4",
|
"mime": "^4.0.4",
|
||||||
"motion": "^12.10.5",
|
"motion": "^12.12.1",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"notion-helper": "^1.3.22",
|
"notion-helper": "^1.3.22",
|
||||||
"npx-scope-finder": "^1.2.0",
|
"npx-scope-finder": "^1.2.0",
|
||||||
"openai": "patch:openai@npm%3A5.1.0#~/.yarn/patches/openai-npm-5.1.0-0e7b3ccb07.patch",
|
"openai": "patch:openai@npm%3A5.1.0#~/.yarn/patches/openai-npm-5.1.0-0e7b3ccb07.patch",
|
||||||
@ -232,6 +243,7 @@
|
|||||||
"playwright": "^1.52.0",
|
"playwright": "^1.52.0",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.5.3",
|
||||||
"prettier-plugin-sort-json": "^4.1.1",
|
"prettier-plugin-sort-json": "^4.1.1",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||||
"proxy-agent": "^6.5.0",
|
"proxy-agent": "^6.5.0",
|
||||||
"rc-virtual-list": "^3.18.6",
|
"rc-virtual-list": "^3.18.6",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
@ -262,13 +274,17 @@
|
|||||||
"strict-url-sanitise": "^0.0.1",
|
"strict-url-sanitise": "^0.0.1",
|
||||||
"string-width": "^7.2.0",
|
"string-width": "^7.2.0",
|
||||||
"styled-components": "^6.1.11",
|
"styled-components": "^6.1.11",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"tailwindcss": "^4.1.5",
|
||||||
"tar": "^7.4.3",
|
"tar": "^7.4.3",
|
||||||
"tiny-pinyin": "^1.3.2",
|
"tiny-pinyin": "^1.3.2",
|
||||||
"tokenx": "^1.1.0",
|
"tokenx": "^1.1.0",
|
||||||
"tsx": "^4.20.3",
|
"tsx": "^4.20.3",
|
||||||
|
"tw-animate-css": "^1.3.6",
|
||||||
"typescript": "^5.6.2",
|
"typescript": "^5.6.2",
|
||||||
"undici": "6.21.2",
|
"undici": "6.21.2",
|
||||||
"unified": "^11.0.5",
|
"unified": "^11.0.5",
|
||||||
|
"usehooks-ts": "^3.1.1",
|
||||||
"uuid": "^10.0.0",
|
"uuid": "^10.0.0",
|
||||||
"vite": "npm:rolldown-vite@latest",
|
"vite": "npm:rolldown-vite@latest",
|
||||||
"vitest": "^3.2.4",
|
"vitest": "^3.2.4",
|
||||||
|
|||||||
@ -7,12 +7,11 @@ import Sidebar from './components/app/Sidebar'
|
|||||||
import TabsContainer from './components/Tab/TabContainer'
|
import TabsContainer from './components/Tab/TabContainer'
|
||||||
import NavigationHandler from './handler/NavigationHandler'
|
import NavigationHandler from './handler/NavigationHandler'
|
||||||
import { useNavbarPosition } from './hooks/useSettings'
|
import { useNavbarPosition } from './hooks/useSettings'
|
||||||
import AgentsPage from './pages/agents/AgentsPage'
|
import DiscoverPage from './pages/discover'
|
||||||
import FilesPage from './pages/files/FilesPage'
|
import FilesPage from './pages/files/FilesPage'
|
||||||
import HomePage from './pages/home/HomePage'
|
import HomePage from './pages/home/HomePage'
|
||||||
import KnowledgePage from './pages/knowledge/KnowledgePage'
|
import KnowledgePage from './pages/knowledge/KnowledgePage'
|
||||||
import LaunchpadPage from './pages/launchpad/LaunchpadPage'
|
import LaunchpadPage from './pages/launchpad/LaunchpadPage'
|
||||||
import MinAppsPage from './pages/minapps/MinAppsPage'
|
|
||||||
import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
|
import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
|
||||||
import SettingsPage from './pages/settings/SettingsPage'
|
import SettingsPage from './pages/settings/SettingsPage'
|
||||||
import TranslatePage from './pages/translate/TranslatePage'
|
import TranslatePage from './pages/translate/TranslatePage'
|
||||||
@ -24,14 +23,15 @@ const Router: FC = () => {
|
|||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<HomePage />} />
|
<Route path="/" element={<HomePage />} />
|
||||||
<Route path="/agents" element={<AgentsPage />} />
|
{/* <Route path="/agents" element={<AgentsPage />} /> */}
|
||||||
<Route path="/paintings/*" element={<PaintingsRoutePage />} />
|
<Route path="/paintings/*" element={<PaintingsRoutePage />} />
|
||||||
<Route path="/translate" element={<TranslatePage />} />
|
<Route path="/translate" element={<TranslatePage />} />
|
||||||
<Route path="/files" element={<FilesPage />} />
|
<Route path="/files" element={<FilesPage />} />
|
||||||
<Route path="/knowledge" element={<KnowledgePage />} />
|
<Route path="/knowledge" element={<KnowledgePage />} />
|
||||||
<Route path="/apps" element={<MinAppsPage />} />
|
{/* <Route path="/apps" element={<MinAppsPage />} /> */}
|
||||||
<Route path="/settings/*" element={<SettingsPage />} />
|
<Route path="/settings/*" element={<SettingsPage />} />
|
||||||
<Route path="/launchpad" element={<LaunchpadPage />} />
|
<Route path="/launchpad" element={<LaunchpadPage />} />
|
||||||
|
<Route path="/discover/*" element={<DiscoverPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
)
|
)
|
||||||
}, [])
|
}, [])
|
||||||
|
|||||||
146
src/renderer/src/assets/styles/tailwind.css
Normal file
146
src/renderer/src/assets/styles/tailwind.css
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@import 'tailwindcss' source('../../../../renderer');
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
/* 如需自定义:
|
||||||
|
1. 清晰地组织自定义 CSS 到相应的层中。
|
||||||
|
2. 基础样式（如全局重置、链接样式）放入 base 层；
|
||||||
|
3. 可复用的组件样式（如果仍使用 @apply 或原生 CSS 嵌套创建）放入 components 层；
|
||||||
|
4. 新的自定义工具类放入 utilities 层。
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--primary: oklch(0.21 0.006 285.885);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.967 0.001 286.375);
|
||||||
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--muted: oklch(0.967 0.001 286.375);
|
||||||
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||||
|
--accent: oklch(0.967 0.001 286.375);
|
||||||
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.92 0.004 286.32);
|
||||||
|
--input: oklch(0.92 0.004 286.32);
|
||||||
|
--ring: oklch(0.705 0.015 286.067);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||||
|
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||||
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||||
|
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.141 0.005 285.823);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.21 0.006 285.885);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.21 0.006 285.885);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.92 0.004 286.32);
|
||||||
|
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||||
|
--secondary: oklch(0.274 0.006 286.033);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.274 0.006 286.033);
|
||||||
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||||
|
--accent: oklch(0.274 0.006 286.033);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.552 0.016 285.938);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.21 0.006 285.885);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--animate-marquee: marquee var(--duration) infinite linear;
|
||||||
|
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
|
||||||
|
@keyframes marquee {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(calc(-100% - var(--gap)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes marquee-vertical {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(calc(-100% - var(--gap)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import { TopView } from '@renderer/components/TopView'
|
import { TopView } from '@renderer/components/TopView'
|
||||||
import { useAgents } from '@renderer/hooks/useAgents'
|
import { useAgents } from '@renderer/hooks/useAgents'
|
||||||
import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
|
import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
|
||||||
import { useSystemAgents } from '@renderer/pages/agents'
|
import { useSystemAgents } from '@renderer/pages/discover/pages/agents'
|
||||||
import { createAssistantFromAgent } from '@renderer/services/AssistantService'
|
import { createAssistantFromAgent } from '@renderer/services/AssistantService'
|
||||||
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
|
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
|
||||||
import { Agent, Assistant } from '@renderer/types'
|
import { Agent, Assistant } from '@renderer/types'
|
||||||
|
|||||||
@ -11,15 +11,14 @@ import { addTab, removeTab, setActiveTab } from '@renderer/store/tabs'
|
|||||||
import { ThemeMode } from '@renderer/types'
|
import { ThemeMode } from '@renderer/types'
|
||||||
import { classNames } from '@renderer/utils'
|
import { classNames } from '@renderer/utils'
|
||||||
import {
|
import {
|
||||||
|
Compass,
|
||||||
FileSearch,
|
FileSearch,
|
||||||
Folder,
|
Folder,
|
||||||
Home,
|
Home,
|
||||||
Languages,
|
Languages,
|
||||||
LayoutGrid,
|
|
||||||
Moon,
|
Moon,
|
||||||
Palette,
|
Palette,
|
||||||
Settings,
|
Settings,
|
||||||
Sparkle,
|
|
||||||
SquareTerminal,
|
SquareTerminal,
|
||||||
Sun,
|
Sun,
|
||||||
X
|
X
|
||||||
@ -38,14 +37,14 @@ const getTabIcon = (tabId: string): React.ReactNode | undefined => {
|
|||||||
switch (tabId) {
|
switch (tabId) {
|
||||||
case 'home':
|
case 'home':
|
||||||
return <Home size={14} />
|
return <Home size={14} />
|
||||||
case 'agents':
|
// case 'agents':
|
||||||
return <Sparkle size={14} />
|
// return <Sparkle size={14} />
|
||||||
case 'translate':
|
case 'translate':
|
||||||
return <Languages size={14} />
|
return <Languages size={14} />
|
||||||
case 'paintings':
|
case 'paintings':
|
||||||
return <Palette size={14} />
|
return <Palette size={14} />
|
||||||
case 'apps':
|
// case 'apps':
|
||||||
return <LayoutGrid size={14} />
|
// return <LayoutGrid size={14} />
|
||||||
case 'knowledge':
|
case 'knowledge':
|
||||||
return <FileSearch size={14} />
|
return <FileSearch size={14} />
|
||||||
case 'mcp':
|
case 'mcp':
|
||||||
@ -54,6 +53,8 @@ const getTabIcon = (tabId: string): React.ReactNode | undefined => {
|
|||||||
return <Folder size={14} />
|
return <Folder size={14} />
|
||||||
case 'settings':
|
case 'settings':
|
||||||
return <Settings size={14} />
|
return <Settings size={14} />
|
||||||
|
case 'discover':
|
||||||
|
return <Compass size={14} />
|
||||||
default:
|
default:
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,15 +16,14 @@ import { isEmoji } from '@renderer/utils'
|
|||||||
import { Avatar, Tooltip } from 'antd'
|
import { Avatar, Tooltip } from 'antd'
|
||||||
import {
|
import {
|
||||||
CircleHelp,
|
CircleHelp,
|
||||||
|
Compass,
|
||||||
FileSearch,
|
FileSearch,
|
||||||
Folder,
|
Folder,
|
||||||
Languages,
|
Languages,
|
||||||
LayoutGrid,
|
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
Moon,
|
Moon,
|
||||||
Palette,
|
Palette,
|
||||||
Settings,
|
Settings,
|
||||||
Sparkle,
|
|
||||||
Sun
|
Sun
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
@ -38,7 +37,7 @@ import { SidebarOpenedMinappTabs, SidebarPinnedApps } from './PinnedMinapps'
|
|||||||
const Sidebar: FC = () => {
|
const Sidebar: FC = () => {
|
||||||
const { hideMinappPopup, openMinapp } = useMinappPopup()
|
const { hideMinappPopup, openMinapp } = useMinappPopup()
|
||||||
const { minappShow, currentMinappId } = useRuntime()
|
const { minappShow, currentMinappId } = useRuntime()
|
||||||
const { sidebarIcons } = useSettings()
|
// const { sidebarIcons } = useSettings()
|
||||||
const { pinned } = useMinapps()
|
const { pinned } = useMinapps()
|
||||||
|
|
||||||
const { pathname } = useLocation()
|
const { pathname } = useLocation()
|
||||||
@ -52,8 +51,8 @@ const Sidebar: FC = () => {
|
|||||||
|
|
||||||
const backgroundColor = useNavBackgroundColor()
|
const backgroundColor = useNavBackgroundColor()
|
||||||
|
|
||||||
const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
|
// const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
|
||||||
|
const showPinnedApps = pinned.length > 0
|
||||||
const to = async (path: string) => {
|
const to = async (path: string) => {
|
||||||
await modelGenerating()
|
await modelGenerating()
|
||||||
navigate(path)
|
navigate(path)
|
||||||
@ -141,22 +140,24 @@ const MainMenus: FC = () => {
|
|||||||
|
|
||||||
const iconMap = {
|
const iconMap = {
|
||||||
assistants: <MessageSquare size={18} className="icon" />,
|
assistants: <MessageSquare size={18} className="icon" />,
|
||||||
agents: <Sparkle size={18} className="icon" />,
|
// agents: <Sparkle size={18} className="icon" />,
|
||||||
paintings: <Palette size={18} className="icon" />,
|
paintings: <Palette size={18} className="icon" />,
|
||||||
translate: <Languages size={18} className="icon" />,
|
translate: <Languages size={18} className="icon" />,
|
||||||
minapp: <LayoutGrid size={18} className="icon" />,
|
// minapp: <LayoutGrid size={18} className="icon" />,
|
||||||
knowledge: <FileSearch size={18} className="icon" />,
|
knowledge: <FileSearch size={18} className="icon" />,
|
||||||
files: <Folder size={17} className="icon" />
|
files: <Folder size={17} className="icon" />,
|
||||||
|
discover: <Compass size={18} className="icon" />
|
||||||
}
|
}
|
||||||
|
|
||||||
const pathMap = {
|
const pathMap = {
|
||||||
assistants: '/',
|
assistants: '/',
|
||||||
agents: '/agents',
|
// agents: '/agents',
|
||||||
paintings: `/paintings/${defaultPaintingProvider}`,
|
paintings: `/paintings/${defaultPaintingProvider}`,
|
||||||
translate: '/translate',
|
translate: '/translate',
|
||||||
minapp: '/apps',
|
// minapp: '/apps',
|
||||||
knowledge: '/knowledge',
|
knowledge: '/knowledge',
|
||||||
files: '/files'
|
files: '/files',
|
||||||
|
discover: '/discover'
|
||||||
}
|
}
|
||||||
|
|
||||||
return sidebarIcons.visible.map((icon) => {
|
return sidebarIcons.visible.map((icon) => {
|
||||||
|
|||||||
@ -64,6 +64,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.api.setTheme(settedTheme)
|
window.api.setTheme(settedTheme)
|
||||||
|
// tailwindThemeChange(settedTheme)
|
||||||
}, [settedTheme])
|
}, [settedTheme])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import './assets/styles/tailwind.css'
|
||||||
import './assets/styles/index.scss'
|
import './assets/styles/index.scss'
|
||||||
import '@ant-design/v5-patch-for-react-19'
|
import '@ant-design/v5-patch-for-react-19'
|
||||||
|
|
||||||
|
|||||||
19
src/renderer/src/hooks/use-mobile.ts
Normal file
19
src/renderer/src/hooks/use-mobile.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
const MOBILE_BREAKPOINT = 768
|
||||||
|
|
||||||
|
export function useIsMobile() {
|
||||||
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||||
|
const onChange = () => {
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||||
|
}
|
||||||
|
mql.addEventListener("change", onChange)
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||||
|
return () => mql.removeEventListener("change", onChange)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return !!isMobile
|
||||||
|
}
|
||||||
@ -93,8 +93,8 @@ export const getProgressLabel = (key: string): string => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const titleKeyMap = {
|
const titleKeyMap = {
|
||||||
agents: 'title.agents',
|
// agents: 'title.agents',
|
||||||
apps: 'title.apps',
|
// apps: 'title.apps',
|
||||||
files: 'title.files',
|
files: 'title.files',
|
||||||
home: 'title.home',
|
home: 'title.home',
|
||||||
knowledge: 'title.knowledge',
|
knowledge: 'title.knowledge',
|
||||||
@ -103,7 +103,8 @@ const titleKeyMap = {
|
|||||||
memories: 'title.memories',
|
memories: 'title.memories',
|
||||||
paintings: 'title.paintings',
|
paintings: 'title.paintings',
|
||||||
settings: 'title.settings',
|
settings: 'title.settings',
|
||||||
translate: 'title.translate'
|
translate: 'title.translate',
|
||||||
|
discover: 'discover.title'
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
export const getTitleLabel = (key: string): string => {
|
export const getTitleLabel = (key: string): string => {
|
||||||
|
|||||||
@ -729,6 +729,13 @@
|
|||||||
"warning": "警告",
|
"warning": "警告",
|
||||||
"you": "用户"
|
"you": "用户"
|
||||||
},
|
},
|
||||||
|
"discover": {
|
||||||
|
"install": "安装",
|
||||||
|
"title": "发现",
|
||||||
|
"uninstall": "卸载",
|
||||||
|
"update": "更新",
|
||||||
|
"update_all": "全部更新"
|
||||||
|
},
|
||||||
"docs": {
|
"docs": {
|
||||||
"title": "帮助文档"
|
"title": "帮助文档"
|
||||||
},
|
},
|
||||||
|
|||||||
37
src/renderer/src/pages/discover/components/DiscoverMain.tsx
Normal file
37
src/renderer/src/pages/discover/components/DiscoverMain.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React, { Suspense } from 'react'
|
||||||
|
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
|
||||||
|
|
||||||
|
import { discoverRouters, InternalCategory } from '../routers'
|
||||||
|
|
||||||
|
export interface DiscoverContentProps {
|
||||||
|
activeTabId: string // This should be one of the CherryStoreType values, e.g., "Assistant"
|
||||||
|
// selectedSubcategoryId: string
|
||||||
|
currentCategory: InternalCategory | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const DiscoverContent: React.FC<DiscoverContentProps> = ({ activeTabId, currentCategory }) => {
|
||||||
|
const location = useLocation() // To see the current path for debugging or more complex logic
|
||||||
|
|
||||||
|
if (!currentCategory || !activeTabId) {
|
||||||
|
return <div className="p-4 text-center">Loading: Category or Tab ID missing...</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!activeTabId && !location.pathname.startsWith('/discover/')) {
|
||||||
|
return <Navigate to="/discover/assistant?subcategory=all" replace /> // Fallback redirect, adjust as needed
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<div>Loading...</div>}>
|
||||||
|
<Routes>
|
||||||
|
{discoverRouters.map((_Route) => {
|
||||||
|
if (!_Route.component) return null
|
||||||
|
return <Route key={_Route.path} path={`/${_Route.path}`} element={<_Route.component />} />
|
||||||
|
})}
|
||||||
|
|
||||||
|
<Route path="*" element={<div>Discover Feature Not Found at {location.pathname}</div>} />
|
||||||
|
</Routes>
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DiscoverContent
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import { SubCategoryItem } from '@renderer/types/cherryStore'
|
||||||
|
import { Badge } from '@renderer/ui/badge'
|
||||||
|
import {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuSubItem,
|
||||||
|
SidebarProvider
|
||||||
|
} from '@renderer/ui/sidebar'
|
||||||
|
|
||||||
|
import { InternalCategory } from '../hooks/useDiscoverCategories'
|
||||||
|
|
||||||
|
interface DiscoverSidebarProps {
|
||||||
|
activeCategory: InternalCategory | undefined
|
||||||
|
selectedSubcategory: string
|
||||||
|
onSelectSubcategory: (subcategoryId: string, row?: SubCategoryItem) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DiscoverSidebar({
|
||||||
|
activeCategory,
|
||||||
|
selectedSubcategory,
|
||||||
|
onSelectSubcategory
|
||||||
|
}: DiscoverSidebarProps) {
|
||||||
|
if (!activeCategory) {
|
||||||
|
return (
|
||||||
|
<Sidebar className="absolute top-0 left-0 h-full border-r">
|
||||||
|
<SidebarContent>
|
||||||
|
<p className="p-4 text-sm text-gray-500">No active category selected.</p>
|
||||||
|
</SidebarContent>
|
||||||
|
</Sidebar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarProvider className="relative h-full min-h-full w-full">
|
||||||
|
<Sidebar className="absolute top-0 left-0 h-full border-r">
|
||||||
|
<SidebarContent>
|
||||||
|
<SidebarMenu>
|
||||||
|
{activeCategory.items &&
|
||||||
|
activeCategory.items.length > 0 &&
|
||||||
|
activeCategory.items.map((subItem) => (
|
||||||
|
<SidebarMenuSubItem key={subItem.id}>
|
||||||
|
<SidebarMenuButton
|
||||||
|
isActive={subItem.id === selectedSubcategory}
|
||||||
|
onClick={() => {
|
||||||
|
onSelectSubcategory(subItem.id, subItem)
|
||||||
|
}}
|
||||||
|
size="sm">
|
||||||
|
<span className="truncate">{subItem.name}</span>
|
||||||
|
{typeof subItem.count === 'number' && (
|
||||||
|
<Badge variant="secondary" className="ml-auto shrink-0">
|
||||||
|
{subItem.count}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuSubItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarContent>
|
||||||
|
</Sidebar>
|
||||||
|
</SidebarProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
118
src/renderer/src/pages/discover/hooks/useDiscoverCategories.ts
Normal file
118
src/renderer/src/pages/discover/hooks/useDiscoverCategories.ts
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||||
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
|
|
||||||
|
import { CATEGORY_REGISTRY, InternalCategory } from '../routers'
|
||||||
|
|
||||||
|
// 导出接口供其他文件使用
|
||||||
|
export type { InternalCategory }
|
||||||
|
|
||||||
|
// Helper to find category by path
|
||||||
|
const findCategoryByPath = (path: string | undefined): InternalCategory | undefined =>
|
||||||
|
CATEGORY_REGISTRY.find((cat) => cat.path === path)
|
||||||
|
|
||||||
|
// Helper to find category by id (activeTab)
|
||||||
|
const findCategoryById = (id: string | undefined): InternalCategory | undefined =>
|
||||||
|
CATEGORY_REGISTRY.find((cat) => cat.id === id)
|
||||||
|
|
||||||
|
export function useDiscoverCategories() {
|
||||||
|
const [activeTab, setActiveTab] = useState<string>('')
|
||||||
|
const [selectedSubcategory, setSelectedSubcategory] = useState<string>('all')
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const location = useLocation()
|
||||||
|
|
||||||
|
// 使用 useRef 来跟踪是否是用户手动导航，避免重复渲染
|
||||||
|
const isUserNavigationRef = useRef(false)
|
||||||
|
|
||||||
|
// URL 同步逻辑 - 适配新的 URL 格式 /discover/xxx?category=xxx
|
||||||
|
useEffect(() => {
|
||||||
|
const pathSegments = location.pathname.split('/').filter(Boolean)
|
||||||
|
const currentCategoryPath = pathSegments.length >= 2 && pathSegments[0] === 'discover' ? pathSegments[1] : undefined
|
||||||
|
const searchParams = new URLSearchParams(location.search)
|
||||||
|
const categoryFromQuery = searchParams.get('category')
|
||||||
|
const subcategoryFromQuery = searchParams.get('subcategory') || 'all'
|
||||||
|
|
||||||
|
// 处理基础路径重定向
|
||||||
|
if (location.pathname === '/discover' || location.pathname === '/discover/') {
|
||||||
|
if (CATEGORY_REGISTRY.length > 0) {
|
||||||
|
const firstCategory = CATEGORY_REGISTRY[0]
|
||||||
|
navigate(`/discover/${firstCategory.path}?category=${firstCategory.id}&subcategory=all`, { replace: true })
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据URL格式，优先使用 category 查询参数
|
||||||
|
let targetCategoryId: string | null = categoryFromQuery
|
||||||
|
|
||||||
|
// 如果没有 category 参数，尝试从路径推断
|
||||||
|
if (!targetCategoryId && currentCategoryPath) {
|
||||||
|
const categoryFromPath = findCategoryByPath(currentCategoryPath)
|
||||||
|
targetCategoryId = categoryFromPath?.id || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理无效分类重定向
|
||||||
|
if (!targetCategoryId || !findCategoryById(targetCategoryId)) {
|
||||||
|
if (CATEGORY_REGISTRY.length > 0) {
|
||||||
|
const firstCategory = CATEGORY_REGISTRY[0]
|
||||||
|
navigate(`/discover/${firstCategory.path}?category=${firstCategory.id}&subcategory=all`, { replace: true })
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只有当状态确实需要更新时才更新
|
||||||
|
if (activeTab !== targetCategoryId) {
|
||||||
|
setActiveTab(targetCategoryId)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedSubcategory !== subcategoryFromQuery) {
|
||||||
|
setSelectedSubcategory(subcategoryFromQuery)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置用户导航标记
|
||||||
|
isUserNavigationRef.current = false
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [location.pathname, location.search, navigate]) // 故意不包含 activeTab 和 selectedSubcategory 以避免重复渲染
|
||||||
|
|
||||||
|
const currentCategory = useMemo(() => {
|
||||||
|
return findCategoryById(activeTab)
|
||||||
|
}, [activeTab])
|
||||||
|
|
||||||
|
// 优化的 Tab 选择处理，使用 useCallback 避免重复渲染
|
||||||
|
// 更新为新的 URL 格式 /discover/xxx?category=xxx&subcategory=xxx
|
||||||
|
const handleSelectTab = useCallback(
|
||||||
|
(tabId: string) => {
|
||||||
|
if (activeTab === tabId) return // 如果已经是当前 tab，直接返回
|
||||||
|
|
||||||
|
const categoryToSelect = findCategoryById(tabId)
|
||||||
|
if (categoryToSelect?.path) {
|
||||||
|
isUserNavigationRef.current = true
|
||||||
|
navigate(`/discover/${categoryToSelect.path}?category=${tabId}&subcategory=all`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[activeTab, navigate]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 优化的子分类选择处理
|
||||||
|
const handleSelectSubcategory = useCallback(
|
||||||
|
(subcategoryId: string) => {
|
||||||
|
if (selectedSubcategory === subcategoryId) return // 如果已经是当前子分类，直接返回
|
||||||
|
|
||||||
|
const currentCatDetails = findCategoryById(activeTab)
|
||||||
|
if (currentCatDetails?.path) {
|
||||||
|
isUserNavigationRef.current = true
|
||||||
|
navigate(`/discover/${currentCatDetails.path}?category=${activeTab}&subcategory=${subcategoryId}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[selectedSubcategory, activeTab, navigate]
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
categories: CATEGORY_REGISTRY, // 直接返回静态注册表
|
||||||
|
activeTab,
|
||||||
|
selectedSubcategory,
|
||||||
|
currentCategory,
|
||||||
|
handleSelectTab,
|
||||||
|
handleSelectSubcategory,
|
||||||
|
setActiveTab
|
||||||
|
}
|
||||||
|
}
|
||||||
63
src/renderer/src/pages/discover/index.tsx
Normal file
63
src/renderer/src/pages/discover/index.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
|
||||||
|
import { Tabs } from '@renderer/ui/vercel-tabs'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
import DiscoverMain from './components/DiscoverMain'
|
||||||
|
import DiscoverSidebar from './components/DiscoverSidebar'
|
||||||
|
import { useDiscoverCategories } from './hooks/useDiscoverCategories'
|
||||||
|
|
||||||
|
export default function DiscoverPage() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { categories, activeTab, selectedSubcategory, currentCategory, handleSelectTab, handleSelectSubcategory } =
|
||||||
|
useDiscoverCategories()
|
||||||
|
|
||||||
|
// 使用 useMemo 优化 tabs 数据，避免每次渲染都创建新数组
|
||||||
|
const vercelTabsData = useMemo(() => {
|
||||||
|
return categories.map((category) => ({
|
||||||
|
id: category.id,
|
||||||
|
label: category.title
|
||||||
|
}))
|
||||||
|
}, [categories])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full">
|
||||||
|
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||||
|
<Navbar>
|
||||||
|
<NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
|
||||||
|
{t('discover.title')}
|
||||||
|
</NavbarCenter>
|
||||||
|
</Navbar>
|
||||||
|
|
||||||
|
{categories.length > 0 && (
|
||||||
|
<div className="px-4 py-2">
|
||||||
|
<Tabs tabs={vercelTabsData} onTabChange={handleSelectTab} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-row overflow-hidden">
|
||||||
|
{currentCategory?.hasSidebar && (
|
||||||
|
<div className="w-64 flex-shrink-0 border-r">
|
||||||
|
<DiscoverSidebar
|
||||||
|
activeCategory={currentCategory}
|
||||||
|
selectedSubcategory={selectedSubcategory}
|
||||||
|
onSelectSubcategory={handleSelectSubcategory}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* {!currentCategory && categories.length > 0 && (
|
||||||
|
<div className="w-64 flex-shrink-0 border-r p-4 text-muted-foreground">Select a category...</div>
|
||||||
|
)} */}
|
||||||
|
|
||||||
|
<main className="w-full overflow-hidden">
|
||||||
|
<DiscoverMain
|
||||||
|
activeTabId={activeTab}
|
||||||
|
// selectedSubcategoryId={selectedSubcategory}
|
||||||
|
currentCategory={currentCategory}
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
|
import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
|
||||||
import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
|
|
||||||
import CustomTag from '@renderer/components/CustomTag'
|
import CustomTag from '@renderer/components/CustomTag'
|
||||||
import ListItem from '@renderer/components/ListItem'
|
import ListItem from '@renderer/components/ListItem'
|
||||||
import Scrollbar from '@renderer/components/Scrollbar'
|
import Scrollbar from '@renderer/components/Scrollbar'
|
||||||
@ -183,27 +182,29 @@ const AgentsPage: FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Navbar>
|
{/* <Navbar> */}
|
||||||
<NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
|
{/* <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}> */}
|
||||||
{t('agents.title')}
|
{/* {t('agents.title')} */}
|
||||||
<Input
|
<div className="p-4">
|
||||||
placeholder={t('common.search')}
|
<Input
|
||||||
className="nodrag"
|
placeholder={t('common.search')}
|
||||||
style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
|
className="nodrag"
|
||||||
size="small"
|
style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
|
||||||
variant="filled"
|
size="small"
|
||||||
allowClear
|
variant="filled"
|
||||||
onClear={handleSearchClear}
|
allowClear
|
||||||
suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
|
onClear={handleSearchClear}
|
||||||
value={searchInput}
|
suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
|
||||||
maxLength={50}
|
value={searchInput}
|
||||||
onChange={handleSearchInputChange}
|
maxLength={50}
|
||||||
onPressEnter={handleSearch}
|
onChange={handleSearchInputChange}
|
||||||
onBlur={handleSearchInputBlur}
|
onPressEnter={handleSearch}
|
||||||
/>
|
onBlur={handleSearchInputBlur}
|
||||||
<div style={{ width: 80 }} />
|
/>
|
||||||
</NavbarCenter>
|
<div style={{ width: 80 }} />
|
||||||
</Navbar>
|
</div>
|
||||||
|
{/* </NavbarCenter> */}
|
||||||
|
{/* </Navbar> */}
|
||||||
|
|
||||||
<Main id="content-container">
|
<Main id="content-container">
|
||||||
<AgentsGroupList>
|
<AgentsGroupList>
|
||||||
@ -314,14 +315,13 @@ const AgentsPage: FC = () => {
|
|||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
`
|
`
|
||||||
|
|
||||||
const AgentsGroupList = styled(Scrollbar)`
|
const AgentsGroupList = styled(Scrollbar)`
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
height: calc(100vh - var(--navbar-height));
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@ -339,10 +339,10 @@ const AgentsGroupList = styled(Scrollbar)`
|
|||||||
const Main = styled.div`
|
const Main = styled.div`
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
`
|
`
|
||||||
|
|
||||||
const AgentsListContainer = styled.div`
|
const AgentsListContainer = styled.div`
|
||||||
height: calc(100vh - var(--navbar-height));
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { groupTranslations } from '@renderer/pages/agents/agentGroupTranslations'
|
import { groupTranslations } from '@renderer/pages/discover/pages/agents/agentGroupTranslations'
|
||||||
import { DynamicIcon, IconName } from 'lucide-react/dynamic'
|
import { DynamicIcon, IconName } from 'lucide-react/dynamic'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
@ -39,7 +39,8 @@ const AppsPage: FC = () => {
|
|||||||
<Container onContextMenu={handleContextMenu}>
|
<Container onContextMenu={handleContextMenu}>
|
||||||
<Navbar>
|
<Navbar>
|
||||||
<NavbarMain>
|
<NavbarMain>
|
||||||
{t('minapp.title')}
|
{/* {t('minapp.title')} */}
|
||||||
|
{/* <div className="p-2"> */}
|
||||||
<Input
|
<Input
|
||||||
placeholder={t('common.search')}
|
placeholder={t('common.search')}
|
||||||
className="nodrag"
|
className="nodrag"
|
||||||
@ -63,6 +64,7 @@ const AppsPage: FC = () => {
|
|||||||
icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
|
icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
|
||||||
onClick={MinappSettingsPopup.show}
|
onClick={MinappSettingsPopup.show}
|
||||||
/>
|
/>
|
||||||
|
{/* </div> */}
|
||||||
</NavbarMain>
|
</NavbarMain>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
<ContentContainer id="content-container">
|
<ContentContainer id="content-container">
|
||||||
@ -131,7 +133,6 @@ const MainContainer = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: calc(100vh - var(--navbar-height));
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const RightContainer = styled(Scrollbar)`
|
const RightContainer = styled(Scrollbar)`
|
||||||
@ -140,7 +141,6 @@ const RightContainer = styled(Scrollbar)`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: calc(100vh - var(--navbar-height));
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const AppsContainerWrapper = styled(Scrollbar)`
|
const AppsContainerWrapper = styled(Scrollbar)`
|
||||||
62
src/renderer/src/pages/discover/routers.ts
Normal file
62
src/renderer/src/pages/discover/routers.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import i18n from '@renderer/i18n'
|
||||||
|
import { CherryStoreType } from '@renderer/types/cherryStore'
|
||||||
|
import { lazy } from 'react'
|
||||||
|
|
||||||
|
export const discoverRouters = [
|
||||||
|
{
|
||||||
|
id: CherryStoreType.ASSISTANT,
|
||||||
|
title: i18n.t('assistants.title'),
|
||||||
|
path: 'assistant',
|
||||||
|
component: lazy(() => import('./pages/agents/AgentsPage'))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: CherryStoreType.MINI_APP,
|
||||||
|
title: i18n.t('minapp.title'),
|
||||||
|
path: 'mini-app',
|
||||||
|
component: lazy(() => import('./pages/minapps/MinAppsPage'))
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// id: CherryStoreType.TRANSLATE,
|
||||||
|
// title: i18n.t('translate.title'),
|
||||||
|
// path: 'translate',
|
||||||
|
// component: lazy(() => import('../translate/TranslatePage'))
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: CherryStoreType.FILES,
|
||||||
|
// title: i18n.t('files.title'),
|
||||||
|
// path: 'files',
|
||||||
|
// component: lazy(() => import('../files/FilesPage'))
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: CherryStoreType.PAINTINGS,
|
||||||
|
// title: i18n.t('paintings.title'),
|
||||||
|
// path: 'paintings/*',
|
||||||
|
// isPrefix: true,
|
||||||
|
// component: lazy(() => import('../paintings/PaintingsRoutePage'))
|
||||||
|
// }
|
||||||
|
// {
|
||||||
|
// id: CherryStoreType.MCP_SERVER,
|
||||||
|
// title: i18n.t('common.mcp'),
|
||||||
|
// path: 'mcp-servers/*',
|
||||||
|
// isPrefix: true,
|
||||||
|
// component: lazy(() => import('../mcp-servers'))
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 静态注册表 - 避免每次渲染都重新生成
|
||||||
|
export interface InternalCategory {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
path: string
|
||||||
|
hasSidebar?: boolean
|
||||||
|
items: Array<{ id: string; name: string; count?: number }>
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预生成的分类注册表
|
||||||
|
export const CATEGORY_REGISTRY: InternalCategory[] = discoverRouters.map((router) => ({
|
||||||
|
id: router.id,
|
||||||
|
title: router.title,
|
||||||
|
path: router.path,
|
||||||
|
hasSidebar: false, // 目前都没有侧边栏
|
||||||
|
items: [{ id: 'all', name: `All ${router.title}` }] // 预设 "All" 子分类
|
||||||
|
}))
|
||||||
0
src/renderer/src/pages/discover/utils/index.ts
Normal file
0
src/renderer/src/pages/discover/utils/index.ts
Normal file
0
src/renderer/src/pages/discover/utils/util.ts
Normal file
0
src/renderer/src/pages/discover/utils/util.ts
Normal file
@ -20,7 +20,7 @@ const LaunchpadPage: FC = () => {
|
|||||||
{
|
{
|
||||||
icon: <LayoutGrid size={32} className="icon" />,
|
icon: <LayoutGrid size={32} className="icon" />,
|
||||||
text: t('title.apps'),
|
text: t('title.apps'),
|
||||||
path: '/apps',
|
path: '/discover/mini-app',
|
||||||
bgColor: 'linear-gradient(135deg, #8B5CF6, #A855F7)' // 小程序：紫色，代表多功能和灵活性
|
bgColor: 'linear-gradient(135deg, #8B5CF6, #A855F7)' // 小程序：紫色，代表多功能和灵活性
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -38,7 +38,7 @@ const LaunchpadPage: FC = () => {
|
|||||||
{
|
{
|
||||||
icon: <Sparkle size={32} className="icon" />,
|
icon: <Sparkle size={32} className="icon" />,
|
||||||
text: t('title.agents'),
|
text: t('title.agents'),
|
||||||
path: '/agents',
|
path: '/discover/assistant',
|
||||||
bgColor: 'linear-gradient(135deg, #6366F1, #4F46E5)' // AI助手：靛蓝渐变，代表智能和科技
|
bgColor: 'linear-gradient(135deg, #6366F1, #4F46E5)' // AI助手：靛蓝渐变，代表智能和科技
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import { getSidebarIconLabel } from '@renderer/i18n/label'
|
|||||||
import { useAppDispatch } from '@renderer/store'
|
import { useAppDispatch } from '@renderer/store'
|
||||||
import { setSidebarIcons } from '@renderer/store/settings'
|
import { setSidebarIcons } from '@renderer/store/settings'
|
||||||
import { message } from 'antd'
|
import { message } from 'antd'
|
||||||
import { FileSearch, Folder, Languages, LayoutGrid, MessageSquareQuote, Palette, Sparkle } from 'lucide-react'
|
import { Compass, FileSearch, Folder, Languages, LayoutGrid, MessageSquareQuote, Palette, Sparkle } from 'lucide-react'
|
||||||
import { FC, useCallback, useMemo } from 'react'
|
import { FC, useCallback, useMemo } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
@ -116,7 +116,8 @@ const SidebarIconsManager: FC<SidebarIconsManagerProps> = ({
|
|||||||
translate: <Languages size={16} />,
|
translate: <Languages size={16} />,
|
||||||
minapp: <LayoutGrid size={16} />,
|
minapp: <LayoutGrid size={16} />,
|
||||||
knowledge: <FileSearch size={16} />,
|
knowledge: <FileSearch size={16} />,
|
||||||
files: <Folder size={15} />
|
files: <Folder size={15} />,
|
||||||
|
discover: <Compass size={15} />
|
||||||
}),
|
}),
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
|
|||||||
@ -60,7 +60,7 @@ const persistedReducer = persistReducer(
|
|||||||
{
|
{
|
||||||
key: 'cherry-studio',
|
key: 'cherry-studio',
|
||||||
storage,
|
storage,
|
||||||
version: 125,
|
version: 126,
|
||||||
blacklist: ['runtime', 'messages', 'messageBlocks', 'tabs'],
|
blacklist: ['runtime', 'messages', 'messageBlocks', 'tabs'],
|
||||||
migrate
|
migrate
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1935,6 +1935,27 @@ const migrateConfig = {
|
|||||||
logger.error('migrate 125 error', error as Error)
|
logger.error('migrate 125 error', error as Error)
|
||||||
return state
|
return state
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
'126': (state: RootState) => {
|
||||||
|
try {
|
||||||
|
const visibleIcons = state.settings.sidebarIcons.visible
|
||||||
|
if (visibleIcons.includes('discover')) {
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
const filteredIcons = visibleIcons.filter((icon) => icon !== 'agents' && icon !== 'minapp')
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
settings: {
|
||||||
|
...state.settings,
|
||||||
|
sidebarIcons: {
|
||||||
|
...state.settings.sidebarIcons,
|
||||||
|
visible: [...filteredIcons, 'discover']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return state
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -20,16 +20,25 @@ import { RemoteSyncState } from './backup'
|
|||||||
|
|
||||||
export type SendMessageShortcut = 'Enter' | 'Shift+Enter' | 'Ctrl+Enter' | 'Command+Enter' | 'Alt+Enter'
|
export type SendMessageShortcut = 'Enter' | 'Shift+Enter' | 'Ctrl+Enter' | 'Command+Enter' | 'Alt+Enter'
|
||||||
|
|
||||||
export type SidebarIcon = 'assistants' | 'agents' | 'paintings' | 'translate' | 'minapp' | 'knowledge' | 'files'
|
export type SidebarIcon =
|
||||||
|
| 'assistants'
|
||||||
|
| 'agents'
|
||||||
|
| 'paintings'
|
||||||
|
| 'translate'
|
||||||
|
| 'minapp'
|
||||||
|
| 'knowledge'
|
||||||
|
| 'files'
|
||||||
|
| 'discover'
|
||||||
|
|
||||||
export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
|
export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
|
||||||
'assistants',
|
'assistants',
|
||||||
'agents',
|
// 'agents',
|
||||||
'paintings',
|
'paintings',
|
||||||
'translate',
|
'translate',
|
||||||
'minapp',
|
// 'minapp',
|
||||||
'knowledge',
|
'knowledge',
|
||||||
'files'
|
'files',
|
||||||
|
'discover'
|
||||||
]
|
]
|
||||||
|
|
||||||
export interface NutstoreSyncRuntime extends RemoteSyncState {}
|
export interface NutstoreSyncRuntime extends RemoteSyncState {}
|
||||||
|
|||||||
@ -5,7 +5,7 @@ export interface Tab {
|
|||||||
path: string
|
path: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TabsState {
|
export interface TabsState {
|
||||||
tabs: Tab[]
|
tabs: Tab[]
|
||||||
activeTabId: string
|
activeTabId: string
|
||||||
}
|
}
|
||||||
|
|||||||
24
src/renderer/src/types/cherryStore.ts
Normal file
24
src/renderer/src/types/cherryStore.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
export enum CherryStoreType {
|
||||||
|
ASSISTANT = 'Assistant',
|
||||||
|
MINI_APP = 'Mini-App',
|
||||||
|
KNOWLEDGE = 'Knowledge',
|
||||||
|
MCP_SERVER = 'MCP-Server',
|
||||||
|
MODEL_PROVIDER = 'Model-Provider',
|
||||||
|
AGENT = 'Agent',
|
||||||
|
TRANSLATE = 'Translate',
|
||||||
|
PAINTINGS = 'Paintings',
|
||||||
|
FILES = 'Files'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SubCategoryItem {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
count?: number // count 是可选的，因为并非所有二级分类都有
|
||||||
|
isActive?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Category {
|
||||||
|
id: CherryStoreType
|
||||||
|
title: string
|
||||||
|
items: SubCategoryItem[]
|
||||||
|
}
|
||||||
46
src/renderer/src/ui/badge.tsx
Normal file
46
src/renderer/src/ui/badge.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
59
src/renderer/src/ui/button.tsx
Normal file
59
src/renderer/src/ui/button.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
21
src/renderer/src/ui/input.tsx
Normal file
21
src/renderer/src/ui/input.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
28
src/renderer/src/ui/separator.tsx
Normal file
28
src/renderer/src/ui/separator.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = "horizontal",
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
137
src/renderer/src/ui/sheet.tsx
Normal file
137
src/renderer/src/ui/sheet.tsx
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||||
|
side === "right" &&
|
||||||
|
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||||
|
side === "left" &&
|
||||||
|
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||||
|
side === "top" &&
|
||||||
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||||
|
side === "bottom" &&
|
||||||
|
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn("text-foreground font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
}
|
||||||
724
src/renderer/src/ui/sidebar.tsx
Normal file
724
src/renderer/src/ui/sidebar.tsx
Normal file
@ -0,0 +1,724 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, VariantProps } from "class-variance-authority"
|
||||||
|
import { PanelLeftIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { useIsMobile } from "@renderer/hooks/use-mobile"
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
import { Button } from "@renderer/ui/button"
|
||||||
|
import { Input } from "@renderer/ui/input"
|
||||||
|
import { Separator } from "@renderer/ui/separator"
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from "@renderer/ui/sheet"
|
||||||
|
import { Skeleton } from "@renderer/ui/skeleton"
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipProvider,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@renderer/ui/tooltip"
|
||||||
|
|
||||||
|
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||||
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||||
|
const SIDEBAR_WIDTH = "16rem"
|
||||||
|
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||||
|
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||||
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||||
|
|
||||||
|
type SidebarContextProps = {
|
||||||
|
state: "expanded" | "collapsed"
|
||||||
|
open: boolean
|
||||||
|
setOpen: (open: boolean) => void
|
||||||
|
openMobile: boolean
|
||||||
|
setOpenMobile: (open: boolean) => void
|
||||||
|
isMobile: boolean
|
||||||
|
toggleSidebar: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
||||||
|
|
||||||
|
function useSidebar() {
|
||||||
|
const context = React.useContext(SidebarContext)
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||||
|
}
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarProvider({
|
||||||
|
defaultOpen = true,
|
||||||
|
open: openProp,
|
||||||
|
onOpenChange: setOpenProp,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
defaultOpen?: boolean
|
||||||
|
open?: boolean
|
||||||
|
onOpenChange?: (open: boolean) => void
|
||||||
|
}) {
|
||||||
|
const isMobile = useIsMobile()
|
||||||
|
const [openMobile, setOpenMobile] = React.useState(false)
|
||||||
|
|
||||||
|
// This is the internal state of the sidebar.
|
||||||
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
|
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||||
|
const open = openProp ?? _open
|
||||||
|
const setOpen = React.useCallback(
|
||||||
|
(value: boolean | ((value: boolean) => boolean)) => {
|
||||||
|
const openState = typeof value === "function" ? value(open) : value
|
||||||
|
if (setOpenProp) {
|
||||||
|
setOpenProp(openState)
|
||||||
|
} else {
|
||||||
|
_setOpen(openState)
|
||||||
|
}
|
||||||
|
|
||||||
|
// This sets the cookie to keep the sidebar state.
|
||||||
|
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||||
|
},
|
||||||
|
[setOpenProp, open]
|
||||||
|
)
|
||||||
|
|
||||||
|
// Helper to toggle the sidebar.
|
||||||
|
const toggleSidebar = React.useCallback(() => {
|
||||||
|
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
||||||
|
}, [isMobile, setOpen, setOpenMobile])
|
||||||
|
|
||||||
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (
|
||||||
|
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||||
|
(event.metaKey || event.ctrlKey)
|
||||||
|
) {
|
||||||
|
event.preventDefault()
|
||||||
|
toggleSidebar()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown)
|
||||||
|
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||||
|
}, [toggleSidebar])
|
||||||
|
|
||||||
|
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||||
|
// This makes it easier to style the sidebar with Tailwind classes.
|
||||||
|
const state = open ? "expanded" : "collapsed"
|
||||||
|
|
||||||
|
const contextValue = React.useMemo<SidebarContextProps>(
|
||||||
|
() => ({
|
||||||
|
state,
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
isMobile,
|
||||||
|
openMobile,
|
||||||
|
setOpenMobile,
|
||||||
|
toggleSidebar,
|
||||||
|
}),
|
||||||
|
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarContext.Provider value={contextValue}>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-wrapper"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH,
|
||||||
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||||
|
...style,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</SidebarContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Sidebar({
|
||||||
|
side = "left",
|
||||||
|
variant = "sidebar",
|
||||||
|
collapsible = "offcanvas",
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
side?: "left" | "right"
|
||||||
|
variant?: "sidebar" | "floating" | "inset"
|
||||||
|
collapsible?: "offcanvas" | "icon" | "none"
|
||||||
|
}) {
|
||||||
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||||
|
|
||||||
|
if (collapsible === "none") {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar"
|
||||||
|
className={cn(
|
||||||
|
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||||
|
<SheetContent
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
data-slot="sidebar"
|
||||||
|
data-mobile="true"
|
||||||
|
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
side={side}
|
||||||
|
>
|
||||||
|
<SheetHeader className="sr-only">
|
||||||
|
<SheetTitle>Sidebar</SheetTitle>
|
||||||
|
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="flex h-full w-full flex-col">{children}</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="group peer text-sidebar-foreground hidden md:block"
|
||||||
|
data-state={state}
|
||||||
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||||
|
data-variant={variant}
|
||||||
|
data-side={side}
|
||||||
|
data-slot="sidebar"
|
||||||
|
>
|
||||||
|
{/* This is what handles the sidebar gap on desktop */}
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-gap"
|
||||||
|
className={cn(
|
||||||
|
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||||
|
"group-data-[collapsible=offcanvas]:w-0",
|
||||||
|
"group-data-[side=right]:rotate-180",
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-container"
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||||
|
side === "left"
|
||||||
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||||
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||||
|
// Adjust the padding for floating and inset variants.
|
||||||
|
variant === "floating" || variant === "inset"
|
||||||
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||||
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-sidebar="sidebar"
|
||||||
|
data-slot="sidebar-inner"
|
||||||
|
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarTrigger({
|
||||||
|
className,
|
||||||
|
onClick,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { toggleSidebar } = useSidebar()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-sidebar="trigger"
|
||||||
|
data-slot="sidebar-trigger"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className={cn("size-7", className)}
|
||||||
|
onClick={(event) => {
|
||||||
|
onClick?.(event)
|
||||||
|
toggleSidebar()
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<PanelLeftIcon />
|
||||||
|
<span className="sr-only">Toggle Sidebar</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||||
|
const { toggleSidebar } = useSidebar()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
data-sidebar="rail"
|
||||||
|
data-slot="sidebar-rail"
|
||||||
|
aria-label="Toggle Sidebar"
|
||||||
|
tabIndex={-1}
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
title="Toggle Sidebar"
|
||||||
|
className={cn(
|
||||||
|
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
||||||
|
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||||
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||||
|
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||||
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||||
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
data-slot="sidebar-inset"
|
||||||
|
className={cn(
|
||||||
|
"bg-background relative flex w-full flex-1 flex-col",
|
||||||
|
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarInput({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Input>) {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
data-slot="sidebar-input"
|
||||||
|
data-sidebar="input"
|
||||||
|
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-header"
|
||||||
|
data-sidebar="header"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-footer"
|
||||||
|
data-sidebar="footer"
|
||||||
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Separator>) {
|
||||||
|
return (
|
||||||
|
<Separator
|
||||||
|
data-slot="sidebar-separator"
|
||||||
|
data-sidebar="separator"
|
||||||
|
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-content"
|
||||||
|
data-sidebar="content"
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group"
|
||||||
|
data-sidebar="group"
|
||||||
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupLabel({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "div"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-label"
|
||||||
|
data-sidebar="group-label"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-group-action"
|
||||||
|
data-sidebar="group-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after:hidden",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarGroupContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-group-content"
|
||||||
|
data-sidebar="group-content"
|
||||||
|
className={cn("w-full text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu"
|
||||||
|
data-sidebar="menu"
|
||||||
|
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-item"
|
||||||
|
data-sidebar="menu-item"
|
||||||
|
className={cn("group/menu-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const sidebarMenuButtonVariants = cva(
|
||||||
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||||
|
outline:
|
||||||
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-8 text-sm",
|
||||||
|
sm: "h-7 text-xs",
|
||||||
|
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function SidebarMenuButton({
|
||||||
|
asChild = false,
|
||||||
|
isActive = false,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
tooltip,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean
|
||||||
|
isActive?: boolean
|
||||||
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||||
|
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
const { isMobile, state } = useSidebar()
|
||||||
|
|
||||||
|
const button = (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-button"
|
||||||
|
data-sidebar="menu-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!tooltip) {
|
||||||
|
return button
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof tooltip === "string") {
|
||||||
|
tooltip = {
|
||||||
|
children: tooltip,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
align="center"
|
||||||
|
hidden={state !== "collapsed" || isMobile}
|
||||||
|
{...tooltip}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuAction({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
showOnHover = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> & {
|
||||||
|
asChild?: boolean
|
||||||
|
showOnHover?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-action"
|
||||||
|
data-sidebar="menu-action"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 md:after:hidden",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
showOnHover &&
|
||||||
|
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuBadge({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-badge"
|
||||||
|
data-sidebar="menu-badge"
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||||
|
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||||
|
"peer-data-[size=sm]/menu-button:top-1",
|
||||||
|
"peer-data-[size=default]/menu-button:top-1.5",
|
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSkeleton({
|
||||||
|
className,
|
||||||
|
showIcon = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
showIcon?: boolean
|
||||||
|
}) {
|
||||||
|
// Random width between 50 to 90%.
|
||||||
|
const width = React.useMemo(() => {
|
||||||
|
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sidebar-menu-skeleton"
|
||||||
|
data-sidebar="menu-skeleton"
|
||||||
|
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{showIcon && (
|
||||||
|
<Skeleton
|
||||||
|
className="size-4 rounded-md"
|
||||||
|
data-sidebar="menu-skeleton-icon"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Skeleton
|
||||||
|
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||||
|
data-sidebar="menu-skeleton-text"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--skeleton-width": width,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
data-slot="sidebar-menu-sub"
|
||||||
|
data-sidebar="menu-sub"
|
||||||
|
className={cn(
|
||||||
|
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="sidebar-menu-sub-item"
|
||||||
|
data-sidebar="menu-sub-item"
|
||||||
|
className={cn("group/menu-sub-item relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarMenuSubButton({
|
||||||
|
asChild = false,
|
||||||
|
size = "md",
|
||||||
|
isActive = false,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean
|
||||||
|
size?: "sm" | "md"
|
||||||
|
isActive?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="sidebar-menu-sub-button"
|
||||||
|
data-sidebar="menu-sub-button"
|
||||||
|
data-size={size}
|
||||||
|
data-active={isActive}
|
||||||
|
className={cn(
|
||||||
|
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||||
|
size === "sm" && "text-xs",
|
||||||
|
size === "md" && "text-sm",
|
||||||
|
"group-data-[collapsible=icon]:hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupAction,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarInput,
|
||||||
|
SidebarInset,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuAction,
|
||||||
|
SidebarMenuBadge,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuSkeleton,
|
||||||
|
SidebarMenuSub,
|
||||||
|
SidebarMenuSubButton,
|
||||||
|
SidebarMenuSubItem,
|
||||||
|
SidebarProvider,
|
||||||
|
SidebarRail,
|
||||||
|
SidebarSeparator,
|
||||||
|
SidebarTrigger,
|
||||||
|
useSidebar,
|
||||||
|
}
|
||||||
13
src/renderer/src/ui/skeleton.tsx
Normal file
13
src/renderer/src/ui/skeleton.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="skeleton"
|
||||||
|
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton }
|
||||||
61
src/renderer/src/ui/tooltip.tsx
Normal file
61
src/renderer/src/ui/tooltip.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||||
|
|
||||||
|
import { cn } from "@renderer/utils/index"
|
||||||
|
|
||||||
|
function TooltipProvider({
|
||||||
|
delayDuration = 0,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||||
|
return (
|
||||||
|
<TooltipPrimitive.Provider
|
||||||
|
data-slot="tooltip-provider"
|
||||||
|
delayDuration={delayDuration}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Tooltip({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<TooltipProvider>
|
||||||
|
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||||
|
</TooltipProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TooltipTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||||
|
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function TooltipContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 0,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
data-slot="tooltip-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||||
|
</TooltipPrimitive.Content>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||||
115
src/renderer/src/ui/vercel-tabs.tsx
Normal file
115
src/renderer/src/ui/vercel-tabs.tsx
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import { cn } from '@renderer/utils'
|
||||||
|
import * as React from 'react'
|
||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
interface Tab {
|
||||||
|
id: string
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
|
tabs: Tab[]
|
||||||
|
activeTab?: string
|
||||||
|
onTabChange?: (tabId: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Tabs = ({
|
||||||
|
ref,
|
||||||
|
className,
|
||||||
|
tabs,
|
||||||
|
activeTab: _,
|
||||||
|
onTabChange,
|
||||||
|
...props
|
||||||
|
}: TabsProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
|
||||||
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0)
|
||||||
|
const [hoverStyle, setHoverStyle] = useState({})
|
||||||
|
const [activeStyle, setActiveStyle] = useState({ left: '0px', width: '0px' })
|
||||||
|
const tabRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (hoveredIndex !== null) {
|
||||||
|
const hoveredElement = tabRefs.current[hoveredIndex]
|
||||||
|
if (hoveredElement) {
|
||||||
|
const { offsetLeft, offsetWidth } = hoveredElement
|
||||||
|
setHoverStyle({
|
||||||
|
left: `${offsetLeft}px`,
|
||||||
|
width: `${offsetWidth}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [hoveredIndex])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const activeElement = tabRefs.current[activeIndex]
|
||||||
|
if (activeElement) {
|
||||||
|
const { offsetLeft, offsetWidth } = activeElement
|
||||||
|
setActiveStyle({
|
||||||
|
left: `${offsetLeft}px`,
|
||||||
|
width: `${offsetWidth}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [activeIndex])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
const firstElement = tabRefs.current[0]
|
||||||
|
if (firstElement) {
|
||||||
|
const { offsetLeft, offsetWidth } = firstElement
|
||||||
|
setActiveStyle({
|
||||||
|
left: `${offsetLeft}px`,
|
||||||
|
width: `${offsetWidth}px`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={ref} className={cn('relative', className)} {...props}>
|
||||||
|
<div className="relative">
|
||||||
|
{/* Hover Highlight */}
|
||||||
|
<div
|
||||||
|
className="absolute flex h-[30px] items-center rounded-[6px] bg-[#0e0f1114] transition-all duration-300 ease-out dark:bg-[#ffffff1a]"
|
||||||
|
style={{
|
||||||
|
...hoverStyle,
|
||||||
|
opacity: hoveredIndex !== null ? 1 : 0
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Active Indicator */}
|
||||||
|
<div
|
||||||
|
className="absolute bottom-[-6px] h-[2px] bg-[#0e0f11] transition-all duration-300 ease-out dark:bg-white"
|
||||||
|
style={activeStyle}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="relative flex items-center space-x-[6px]">
|
||||||
|
{tabs.map((tab, index) => (
|
||||||
|
<div
|
||||||
|
key={tab.id}
|
||||||
|
ref={(el) => {
|
||||||
|
tabRefs.current[index] = el
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'h-[30px] cursor-pointer px-3 py-2 transition-colors duration-300',
|
||||||
|
index === activeIndex ? 'text-[#0e0e10] dark:text-white' : 'text-[#0e0f1199] dark:text-[#ffffff99]'
|
||||||
|
)}
|
||||||
|
onMouseEnter={() => setHoveredIndex(index)}
|
||||||
|
onMouseLeave={() => setHoveredIndex(null)}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveIndex(index)
|
||||||
|
onTabChange?.(tab.id)
|
||||||
|
}}>
|
||||||
|
<div className="flex h-full items-center justify-center text-sm leading-5 font-medium whitespace-nowrap">
|
||||||
|
{tab.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
Tabs.displayName = 'Tabs'
|
||||||
|
|
||||||
|
export { Tabs }
|
||||||
@ -1,7 +1,9 @@
|
|||||||
import { loggerService } from '@logger'
|
import { loggerService } from '@logger'
|
||||||
import { Language, Model, ModelType, Provider } from '@renderer/types'
|
import { Language, Model, ModelType, Provider } from '@renderer/types'
|
||||||
import { ModalFuncProps } from 'antd'
|
import { ModalFuncProps } from 'antd'
|
||||||
|
import { type ClassValue, clsx } from 'clsx'
|
||||||
import { isEqual } from 'lodash'
|
import { isEqual } from 'lodash'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
|
|
||||||
const logger = loggerService.withContext('Utils')
|
const logger = loggerService.withContext('Utils')
|
||||||
@ -234,6 +236,10 @@ export function uniqueObjectArray<T>(array: T[]): T[] {
|
|||||||
return array.filter((obj, index, self) => index === self.findIndex((t) => isEqual(t, obj)))
|
return array.filter((obj, index, self) => index === self.findIndex((t) => isEqual(t, obj)))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
||||||
export * from './api'
|
export * from './api'
|
||||||
export * from './collection'
|
export * from './collection'
|
||||||
export * from './file'
|
export * from './file'
|
||||||
|
|||||||
@ -12,6 +12,10 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"emitDecoratorMetadata": true,
|
"emitDecoratorMetadata": true,
|
||||||
"useDefineForClassFields": true
|
"useDefineForClassFields": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@renderer/*": ["src/renderer/src/*"]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
"src/renderer/src/services/traceApi.ts" ],
|
"src/renderer/src/services/traceApi.ts" ],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
"types": [
|
"types": [
|
||||||
"electron-vite/node",
|
"electron-vite/node",
|
||||||
"vitest/globals"
|
"vitest/globals"
|
||||||
@ -22,7 +23,9 @@
|
|||||||
"@types": ["src/renderer/src/types/index.ts"],
|
"@types": ["src/renderer/src/types/index.ts"],
|
||||||
"@shared/*": ["packages/shared/*"],
|
"@shared/*": ["packages/shared/*"],
|
||||||
"@logger": ["src/main/services/LoggerService"],
|
"@logger": ["src/main/services/LoggerService"],
|
||||||
"@mcp-trace/*": ["packages/mcp-trace/*"]
|
"@mcp-trace/*": ["packages/mcp-trace/*"],
|
||||||
|
"@renderer/*": ["src/renderer/src/*"],
|
||||||
|
"@modelcontextprotocol/sdk/*": ["node_modules/@modelcontextprotocol/sdk/dist/esm/*"]
|
||||||
},
|
},
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"emitDecoratorMetadata": true,
|
"emitDecoratorMetadata": true,
|
||||||
|
|||||||
@ -25,7 +25,8 @@ export default defineConfig({
|
|||||||
// 渲染进程单元测试配置
|
// 渲染进程单元测试配置
|
||||||
{
|
{
|
||||||
extends: true,
|
extends: true,
|
||||||
plugins: rendererConfig.plugins,
|
// exclude tailwindcss plugin
|
||||||
|
plugins: rendererConfig.plugins.filter((plugin: any) => plugin.name !== 'tailwindcss'),
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: rendererConfig.resolve.alias
|
alias: rendererConfig.resolve.alias
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user