refactor: update layout of AgentsPage and AppsPage, remove Navbar components

- Refactored AgentsPage and AppsPage to enhance layout by replacing Navbar components with div wrappers.
- Integrated Tailwind CSS for improved styling consistency.
- Adjusted input components for better alignment and spacing.

electron.vite.config.ts

@@ -41,6 +41,7 @@ export default defineConfig({
   },
   renderer: {
     plugins: [
+      tailwindcssPlugin(),
       react({
         plugins: [
           [
@@ -54,7 +55,6 @@ export default defineConfig({
           ]
         ]
       }),
-      tailwindcssPlugin(),
       ...visualizerPlugin('renderer')
     ],
     resolve: {

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -1,5 +1,4 @@
 import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import CustomTag from '@renderer/components/CustomTag'
 import ListItem from '@renderer/components/ListItem'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -152,27 +151,23 @@ const AgentsPage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
+      <div className="p-4">
-        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+        <Input
-          {t('agents.title')}
+          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={(e) => setSearchInput(e.target.value)}
-            maxLength={50}
+          onPressEnter={handleSearch}
-            onChange={(e) => setSearchInput(e.target.value)}
+        />
-            onPressEnter={handleSearch}
+        <div style={{ width: 80 }} />
-          />
+      </div>
-          <div style={{ width: 80 }} />
-        </NavbarCenter>
-      </Navbar>
-
       <Main id="content-container">
         <AgentsGroupList>
           {Object.entries(agentGroups).map(([group]) => (

src/renderer/src/pages/apps/AppsPage.tsx

@@ -1,4 +1,3 @@
-import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { Button, Input } from 'antd'
 import { Search, SettingsIcon, X } from 'lucide-react'
@@ -41,35 +40,37 @@ const AppsPage: FC = () => {
 
   return (
     <Container onContextMenu={handleContextMenu}>
-      <Navbar>
+      {/* <Navbar> */}
-        <NavbarMain>
+      {/* <NavbarMain> */}
-          {t('minapp.title')}
+      {/* {t('minapp.title')} */}
-          <Input
+      <div className="p-2">
-            placeholder={t('common.search')}
+        <Input
-            className="nodrag"
+          placeholder={t('common.search')}
-            style={{
+          className="nodrag"
-              width: '30%',
+          style={{
-              height: 28,
+            width: '30%',
-              borderRadius: 15,
+            height: 28,
-              position: 'absolute',
+            borderRadius: 15,
-              left: '50vw',
+            position: 'absolute',
-              transform: 'translateX(-50%)'
+            left: '50vw',
-            }}
+            transform: 'translateX(-50%)'
-            size="small"
+          }}
-            variant="filled"
+          size="small"
-            suffix={<Search size={18} />}
+          variant="filled"
-            value={search}
+          suffix={<Search size={18} />}
-            onChange={(e) => setSearch(e.target.value)}
+          value={search}
-            disabled={isSettingsOpen}
+          onChange={(e) => setSearch(e.target.value)}
-          />
+          disabled={isSettingsOpen}
-          <Button
+        />
-            type="text"
+        <Button
-            className="nodrag"
+          type="text"
-            icon={isSettingsOpen ? <X size={18} /> : <SettingsIcon size={18} color="var(--color-text-2)" />}
+          className="nodrag"
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+          icon={isSettingsOpen ? <X size={18} /> : <SettingsIcon size={18} color="var(--color-text-2)" />}
-          />
+          onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-        </NavbarMain>
+        />
-      </Navbar>
+      </div>
+      {/* </NavbarMain> */}
+      {/* </Navbar> */}
       <ContentContainer id="content-container">
         {isSettingsOpen && <MiniAppSettings />}
         {!isSettingsOpen && (

vitest.config.ts

@@ -24,7 +24,8 @@ export default defineConfig({
       // 渲染进程单元测试配置
       {
         extends: true,
-        plugins: rendererConfig.plugins,
+        // exclude tailwindcss plugin
+        plugins: rendererConfig.plugins.slice(1),
         resolve: {
           alias: rendererConfig.resolve.alias
         },