style: modify the style (#370)

* style: modify the style * style: adjust page style * style: web style * docs: update notes
2025-12-16 11:37:47 +01:00 · 2025-04-16 11:19:23 +08:00
parent c3bef7e46b
commit a22024f640
20 changed files with 51 additions and 53 deletions
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-COCO_SERVER_URL=http://localhost:9000 https://coco.infini.cloud  #http://localhost:9000
+COCO_SERVER_URL=https://coco.infini.cloud  #http://localhost:9000

-COCO_WEBSOCKET_URL=ws://localhost:9000/ws wss://coco.infini.cloud/ws #ws://localhost:9000/ws
+COCO_WEBSOCKET_URL=wss://coco.infini.cloud/ws #ws://localhost:9000/ws
--- a/docs/content.en/docs/release-notes/_index.md
+++ b/docs/content.en/docs/release-notes/_index.md
@@ -32,6 +32,7 @@ Information about release notes of Coco Server is provided here.
 - refactor: web components #331
 - refactor: refactoring login callback, receive access_token from coco-server
 - chore: adjust web component styles #362
+- style: modify the style #370

 ## 0.3.0 (2025-03-31)

--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -31,7 +31,7 @@
        "visible": false,
        "windowEffects": {
          "effects": [],
-          "radius": 12
+          "radius": 6
        },
        "visibleOnAllWorkspaces": true,
        "alwaysOnTop": true
--- a/src/components/Assistant/Chat.tsx
+++ b/src/components/Assistant/Chat.tsx
@@ -367,7 +367,7 @@ const ChatAI = memo(
      return (
        <div
          data-tauri-drag-region
-          className={`h-full flex flex-col rounded-xl relative`}
+          className={`h-full flex flex-col rounded-md relative`}
        >
          {showChatHistory && !setIsSidebarOpen && (
            <ChatSidebar
--- a/src/components/Common/UI/Footer.tsx
+++ b/src/components/Common/UI/Footer.tsx
@@ -50,7 +50,7 @@ export default function Footer({
  return (
    <div
      data-tauri-drag-region={isTauri}
-      className="px-4 z-999 mx-[1px] h-8 absolute bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-xl rounded-t-none overflow-hidden"
+      className="px-4 z-999 mx-[1px] h-8 absolute bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between rounded-md rounded-t-none overflow-hidden"
    >
      {isTauri ? (
        <div className="flex items-center">
--- a/src/components/Search/DropdownList.tsx
+++ b/src/components/Search/DropdownList.tsx
@@ -158,7 +158,7 @@ function DropdownList({
    <div
      ref={containerRef}
      data-tauri-drag-region
-      className="h-[458px] w-full p-2 flex flex-col overflow-y-auto custom-scrollbar focus:outline-none"
+      className="h-full w-full p-2 flex flex-col overflow-y-auto custom-scrollbar focus:outline-none"
      tabIndex={0}
    >
      {showError ? (
--- a/src/components/Search/InputBox.tsx
+++ b/src/components/Search/InputBox.tsx
@@ -287,7 +287,7 @@ export default function ChatInput({
  return (
    <div className={`w-full relative`}>
      <div
-        className={`p-2 flex items-center dark:text-[#D8D8D8] bg-[#ededed] dark:bg-[#202126] rounded transition-all relative overflow-hidden`}
+        className={`p-2 flex items-center dark:text-[#D8D8D8] bg-[#ededed] dark:bg-[#202126] rounded-md transition-all relative overflow-hidden`}
      >
        <div className="flex flex-wrap gap-2 flex-1 items-center relative">
          {!isChatMode && !sourceData ? (
@@ -428,7 +428,7 @@ export default function ChatInput({
        className="flex justify-between items-center py-2"
      >
        {isChatMode ? (
-          <div className="flex gap-2 text-sm text-[#333] dark:text-[#d8d8d8]">
+          <div className="flex gap-2 text-[12px] leading-3 text-[#333] dark:text-[#d8d8d8]">
            {/* {sessionId && (
              <InputExtra
                checkScreenPermission={checkScreenPermission}
@@ -446,16 +446,16 @@ export default function ChatInput({
            {hasFeature.includes("think") && (
              <button
                className={clsx(
-                  "flex items-center gap-1 p-1 h-6 rounded-lg transition hover:bg-[#EDEDED] dark:hover:bg-[#202126]",
+                  "flex items-center gap-1 py-[3px] pl-1 pr-1.5 rounded-md transition hover:bg-[#EDEDED] dark:hover:bg-[#202126]",
                  {
                    "!bg-[rgba(0,114,255,0.3)]": isDeepThinkActive,
                  }
                )}
                onClick={DeepThinkClick}
              >
-                <VisibleKey shortcut={deepThinking} onKeypress={DeepThinkClick}>
+                <VisibleKey shortcut={deepThinking} onKeypress={DeepThinkClick} className="!size-3">
                  <Brain
-                    className={`size-4 ${
+                    className={`size-3 ${
                      isDeepThinkActive
                        ? "text-[#0072FF] dark:text-[#0072FF]"
                        : "text-[#333] dark:text-white"
@@ -464,9 +464,9 @@ export default function ChatInput({
                </VisibleKey>
                {isDeepThinkActive && (
                  <span
-                    className={
+                    className={`${
                      isDeepThinkActive ? "text-[#0072FF]" : "dark:text-white"
-                    }
+                    }`}
                  >
                    {t("search.input.deepThink")}
                  </span>
--- a/src/components/Search/ListRight.tsx
+++ b/src/components/Search/ListRight.tsx
@@ -1,6 +1,5 @@
 import TypeIcon from "@/components/Common/Icons/TypeIcon";
 import RichIcon from "@/components/Common/Icons/RichIcon";
-import { useAppStore } from "@/stores/appStore";

 interface ListRightProps {
  item: any;
@@ -17,17 +16,13 @@ export default function ListRight({
  currentIndex,
  goToTwoPage,
 }: ListRightProps) {
-  const isTauri = useAppStore((state) => state.isTauri);
-
  return (
    <div
-      className={`${
-        isTauri ? "flex" : "hidden md:flex"
-      } flex-1 text-right min-w-[160px] h-full pl-5 text-[12px] gap-2 items-center justify-end relative`}
+      className={`flex flex-1 md:text-right text-left md:min-w-[160px] w-full h-full md:pl-5 text-[12px] gap-2 items-center md:justify-end justify-start relative`}
    >
      {item?.rich_categories ? null : (
        <div
-          className="w-4 h-4 cursor-pointer"
+          className="hidden md:inline-block w-4 h-4 cursor-pointer"
          onClick={(e) => {
            e.stopPropagation();
            goToTwoPage && goToTwoPage(item);
@@ -48,7 +43,7 @@ export default function ListRight({
        <div className="flex items-center justify-end max-w-[calc(100%-20px)] whitespace-nowrap">
          <RichIcon
            item={item}
-            className="w-4 h-4 mr-2 cursor-pointer"
+            className="hidden md:inline-block w-4 h-4 mr-2 cursor-pointer"
            onClick={(e) => {
              e.stopPropagation();
              goToTwoPage && goToTwoPage(item);
--- a/src/components/Search/SearchListItem.tsx
+++ b/src/components/Search/SearchListItem.tsx
@@ -42,16 +42,16 @@ const SearchListItem: React.FC<SearchListItemProps> = React.memo(({
      ref={itemRef}
      onMouseEnter={onMouseEnter}
      onClick={onItemClick}
-      className={`w-full px-2 py-2.5 text-sm flex items-center justify-between rounded-lg transition-colors cursor-pointer ${
+      className={`w-full px-2 py-2.5 md:mb-0 mb-2 text-sm flex md:flex-row flex-col md:items-center items-start justify-between rounded-lg transition-colors cursor-pointer ${
        isSelected
          ? "text-white bg-[var(--coco-primary-color)] hover:bg-[var(--coco-primary-color)]"
-          : "text-[#333] dark:text-[#d8d8d8]"
-      } ${showListRight ? "gap-7" : ""}`}
+          : "text-[#333] dark:text-[#d8d8d8] md:bg-transparent bg-gray-200/80 dark:bg-gray-700/50"
+      } ${showListRight ? "md:gap-7 gap-1" : ""}`}
      onContextMenu={onContextMenu}
    >
      <div
        className={`${
-          showListRight ? "max-w-[450px]" : "flex-1"
+          showListRight ? "md:max-w-[450px] w-full" : "flex-1"
        } min-w-0 flex gap-2 items-center justify-start `}
      >
        <ItemIcon item={item} />
--- a/src/components/Search/SearchPopover.tsx
+++ b/src/components/Search/SearchPopover.tsx
@@ -188,16 +188,16 @@ export default function SearchPopover({
  return (
    <div
      className={clsx(
-        "flex items-center gap-1 p-1 h-6 rounded-lg transition hover:bg-[#EDEDED] dark:hover:bg-[#202126] cursor-pointer",
+        "flex items-center gap-1 p-[3px] pr-1 rounded-md transition hover:bg-[#EDEDED] dark:hover:bg-[#202126] cursor-pointer",
        {
          "!bg-[rgba(0,114,255,0.3)]": isSearchActive,
        }
      )}
      onClick={setIsSearchActive}
    >
-      <VisibleKey shortcut={internetSearch} onKeypress={setIsSearchActive}>
+      <VisibleKey shortcut={internetSearch} onKeypress={setIsSearchActive} className="!size-3">
        <Globe
-          className={`size-4 ${
+          className={`size-3 ${
            isSearchActive
              ? "text-[#0072FF] dark:text-[#0072FF]"
              : "text-[#333] dark:text-white"
@@ -208,7 +208,7 @@ export default function SearchPopover({
      {isSearchActive && (
        <>
          <span
-            className={isSearchActive ? "text-[#0072FF]" : "dark:text-white"}
+            className={`${isSearchActive ? "text-[#0072FF]" : "dark:text-white"}`}
          >
            {t("search.input.search")}
          </span>
@@ -229,9 +229,10 @@ export default function SearchPopover({
                  onKeypress={() => {
                    buttonRef.current?.click();
                  }}
+                  className="!size-3"
                >
                  <ChevronDownIcon
-                    className={clsx("size-5", [
+                    className={clsx("size-3", [
                      isSearchActive
                        ? "text-[#0072FF] dark:text-[#0072FF]"
                        : "text-[#333] dark:text-white",
--- a/src/components/Search/SearchResults.tsx
+++ b/src/components/Search/SearchResults.tsx
@@ -31,7 +31,7 @@ export function SearchResults({ input, isChatMode, queryDocuments }: SearchResul
  }

  return (
-    <div className="h-[458px] w-full p-2 pr-0 flex flex-col rounded-xl focus:outline-none">
+    <div className="h-full w-full p-2 pr-0 flex flex-col rounded-xl focus:outline-none">
      <div className="h-full flex">
        {/* Left Panel */}
        <DocumentList
--- a/src/components/SearchChat/index.tsx
+++ b/src/components/SearchChat/index.tsx
@@ -8,6 +8,7 @@ import {
  useState,
 } from "react";
 import clsx from "clsx";
+import { useMount } from "ahooks";

 import Search from "@/components/Search/Search";
 import InputBox from "@/components/Search/InputBox";
@@ -23,10 +24,6 @@ import { useStartupStore } from "@/stores/startupStore";
 import { DataSource } from "@/types/commands";
 import { useThemeStore } from "@/stores/themeStore";
 import { Get } from "@/api/axiosRequest";
-import { useKeyPress, useMount } from "ahooks";
-import { modifierKeys } from "../Settings/Advanced/components/Shortcuts";
-import { useShortcutsStore } from "@/stores/shortcutsStore";
-import { useModifierKeyPress } from "@/hooks/useModifierKeyPress";

 interface SearchChatProps {
  isTauri?: boolean;
@@ -282,7 +279,7 @@ function SearchChat({
        {
          "size-full": !isTauri,
          "w-screen h-screen": isTauri,
-          "rounded-xl": !isWin,
+          "rounded-md": !isWin,
          "border border-[#E6E6E6] dark:border-[#272626]": isTauri && isLinux,
          "border-t border-t-[#999] dark:border-t-[#333]": isTauri && isWin10,
        }
@@ -290,10 +287,10 @@ function SearchChat({
    >
      <div
        data-tauri-drag-region={isTauri}
-        className={`p-2 pb-0 absolute w-full flex items-center justify-center transition-all duration-500 ${
+        className={`p-2 absolute w-full flex justify-center transition-all duration-500 ${
          isTransitioned
-            ? "top-[calc(100%-90px)] h-[90px] border-t"
-            : "top-0 h-[90px] border-b"
+            ? "top-[calc(100%-84px)] h-[84px] border-t"
+            : "top-0 h-[84px] border-b"
        } border-[#E6E6E6] dark:border-[#272626]`}
      >
        <InputBox
@@ -332,7 +329,7 @@ function SearchChat({
        data-tauri-drag-region={isTauri}
        className={`absolute w-full transition-opacity duration-500 ${
          isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
-        } bottom-0 h-[calc(100%-90px)] `}
+        } bottom-0 h-[calc(100%-84px)] `}
      >
        <Suspense fallback={<LoadingFallback />}>
          <Search
--- a/src/components/Settings/Advanced/components/Shortcuts/index.tsx
+++ b/src/components/Settings/Advanced/components/Shortcuts/index.tsx
@@ -1,12 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { Command } from "lucide-react";
 import { ChangeEvent, useEffect } from "react";
-import { emit } from "@tauri-apps/api/event";

 import { formatKey } from "@/utils/keyboardUtils";
 import SettingsItem from "@/components/Settings/SettingsItem";
 import { isMac } from "@/utils/platform";
-import { ModifierKey, useShortcutsStore } from "@/stores/shortcutsStore";
+import { useShortcutsStore } from "@/stores/shortcutsStore";
+import { ModifierKey } from "@/types/index";
+import platformAdapter from "@/utils/platformAdapter";

 export const modifierKeys: ModifierKey[] = isMac
  ? ["meta", "ctrl"]
@@ -53,7 +54,7 @@ const Shortcuts = () => {

  useEffect(() => {
    const unlisten = useShortcutsStore.subscribe((state) => {
-      emit("change-shortcuts-store", state);
+      platformAdapter.emitEvent("change-shortcuts-store", state);
    });

    return unlisten;
--- a/src/main.css
+++ b/src/main.css
@@ -96,7 +96,7 @@
  }

  .input-body {
-    @apply rounded-xl overflow-hidden;
+    @apply rounded-md overflow-hidden;
  }

  .icon {
--- a/src/pages/web/index.tsx
+++ b/src/pages/web/index.tsx
@@ -31,7 +31,7 @@ function WebApp({
  height = 590,
  headers = {
    "X-API-TOKEN":
-      "cvqt6r02sdb2v3bkgip0x3ixv01f3r2lhnxoz1efbn160wm9og58wtv8t6wrv1ebvnvypuc23dx9pb33aemh",
+      "cvv8e2ehpcevm89r0khg8iesn4hbuzhxvy3y621n0ca2cqs3vw46mhs91yr5us82emdg46r0qtrt23nl1lux",
    "APP-INTEGRATION-ID": "cvkm9hmhpcemufsg3vug",
  },
  // token = "cva1j5ehpcenic3ir7k0h8fb8qtv35iwtywze248oscrej8yoivhb5b1hyovp24xejjk27jy9ddt69ewfi3n",   // https://coco.infini.cloud
@@ -41,7 +41,7 @@ function WebApp({
  hideCoco = () => {},
  hasModules = ["search", "chat"],
  defaultModule = "search",
-  hasFeature = ["search", "think_active", "search_active"],
+  hasFeature = ["search", "think", "think_active", "search_active"],
  theme = "dark",
  searchPlaceholder = "",
  chatPlaceholder = "",
@@ -142,7 +142,7 @@ function WebApp({
      {isMobile() && (
        <div
          className={`fixed ${
-            isChatMode ? "top-2" : "top-4"
+            isChatMode ? "top-2" : "top-3"
          } right-2 flex items-center justify-center w-8 h-8 rounded-full bg-black/10 dark:bg-white/10 cursor-pointer z-50`}
          onClick={onCancel}
        >
--- a/src/stores/shortcutsStore.ts
+++ b/src/stores/shortcutsStore.ts
@@ -1,8 +1,8 @@
-import { isMac } from "@/utils/platform";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";

-export type ModifierKey = "meta" | "ctrl" | "alt";
+import { isMac } from "@/utils/platform";
+import { ModifierKey } from "@/types/index";

 export type IShortcutsStore = {
  modifierKey: ModifierKey;
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,2 +1,5 @@
 export type AppEndpoint = string
+
 export type AppTheme = "auto" | "light" | "dark"
+
+export type ModifierKey = "meta" | "ctrl" | "alt";
--- a/src/utils/platformAdapter.ts
+++ b/src/utils/platformAdapter.ts
@@ -1,8 +1,8 @@
 // manual modification
-// import { createWebAdapter } from './webAdapter';
+//import { createWebAdapter } from './webAdapter';
 import { createTauriAdapter } from "./tauriAdapter";

 let platformAdapter = createTauriAdapter();
-// let platformAdapter: WebPlatformAdapter = createWebAdapter();
+//let platformAdapter = createWebAdapter();

 export default platformAdapter;
--- a/src/utils/webAdapter.ts
+++ b/src/utils/webAdapter.ts
@@ -171,7 +171,7 @@ export const createWebAdapter = (): WebPlatformAdapter => {
    isWindows10: async () => false,

    async setShadow(enable) {
-      console.warn("setShadow is not supported in web environment", enable);
+      console.log("setShadow is not supported in web environment", enable);
      return Promise.resolve();
    },
  };
--- a/src/web.css
+++ b/src/web.css
@@ -155,7 +155,7 @@ body,

 .input-body {
  overflow: hidden;
-  border-radius: 0.75rem;
+  border-radius: 0.375rem;
 }

 .icon {