style: update styles for improved visual consistency and layout

src/renderer/src/assets/styles/index.scss

@@ -9,7 +9,7 @@
   --color-white-soft: rgba(255, 255, 255, 0.8);
   --color-white-mute: rgba(255, 255, 255, 0.94);
 
-  --color-black: #0f0f0f;
+  --color-black: #121212;
   --color-black-soft: #191919;
   --color-black-mute: #242424;
 
@@ -40,6 +40,7 @@
   --color-code-background: #323232;
   --color-hover: rgba(40, 40, 40, 1);
   --color-active: rgba(55, 55, 55, 1);
+  --color-frame-border: #333;
 
   --navbar-background-mac: rgba(30, 30, 30, 0.6);
   --navbar-background: rgba(30, 30, 30);
@@ -95,6 +96,7 @@ body[theme-mode='light'] {
   --color-code-background: #e3e3e3;
   --color-hover: var(--color-white-mute);
   --color-active: var(--color-white-soft);
+  --color-frame-border: #ddd;
 
   --navbar-background-mac: rgba(255, 255, 255, 0.6);
   --navbar-background: rgba(255, 255, 255);

src/renderer/src/components/AssistantSettings/index.tsx

@@ -74,7 +74,8 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, ...props })
         content: {
           padding: 0,
           overflow: 'hidden',
-          background: 'var(--color-background)'
+          background: 'var(--color-background)',
+          border: `1px solid var(--color-frame-border)`
         },
         header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0 }
       }}

src/renderer/src/components/Popups/SearchPopup.tsx

@@ -35,7 +35,10 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       width="920px"
       transitionName="ant-move-down"
       styles={{
-        content: { padding: 0, border: '1px solid var(--color-border)' },
+        content: {
+          padding: 0,
+          border: `1px solid var(--color-frame-border)`
+        },
         body: { height: '85vh' }
       }}
       centered

src/renderer/src/context/AntdProvider.tsx

@@ -22,11 +22,11 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
         components: {
           Segmented: {
             trackBg: 'transparent',
-            itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+            itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
             boxShadowTertiary: undefined,
-            borderRadiusLG: 12,
+            borderRadiusLG: 6,
-            borderRadiusSM: 12,
+            borderRadiusSM: 6,
-            borderRadiusXS: 12
+            borderRadiusXS: 6
           },
           Menu: {
             activeBarBorderWidth: 0,
@@ -37,7 +37,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           }
         },
         token: {
-          colorPrimary: '#00b96b'
+          colorPrimary: '#00b96b',
+          borderRadius: 6
         }
       }}>
       {children}

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

@@ -253,7 +253,7 @@ const Tabs = styled(TabsAntd)`
   }
   .ant-tabs-tab {
     margin: 0 !important;
-    border-radius: 20px;
+    border-radius: 7px;
     margin-bottom: 5px !important;
     font-size: 13px;
     justify-content: left;

src/renderer/src/pages/agents/components/AgentCard.tsx

@@ -81,7 +81,7 @@ const Container = styled.div`
   text-align: center;
   gap: 10px;
   background-color: var(--color-background);
-  border-radius: 15px;
+  border-radius: 8px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
@@ -94,8 +94,8 @@ const Container = styled.div`
     position: absolute;
     top: 0;
     left: 0;
-    border-top-left-radius: 15px;
+    border-top-left-radius: 8px;
-    border-top-right-radius: 15px;
+    border-top-right-radius: 8px;
     background: var(--color-background-soft);
     transition: all 0.5s ease;
     border-bottom: none;
@@ -133,7 +133,7 @@ const CardInfo = styled.div`
   align-items: center;
   gap: 5px;
   transition: all 0.5s ease;
-  padding: 0 15px;
+  padding: 0 8px;
   width: 100%;
 `
 

src/renderer/src/pages/home/Tabs/Assistants.tsx

@@ -187,7 +187,7 @@ const Assistants: FC<Props> = ({
             suffix={<CommandKey>⌘+K</CommandKey>}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            style={{ borderRadius: 16, borderWidth: 0.5 }}
+            style={{ borderWidth: 0.5 }}
             onKeyDown={onSearch}
             ref={searchRef}
             onFocus={() => dispatch(setSearching(true))}
@@ -248,10 +248,10 @@ const AssistantItem = styled.div`
   justify-content: space-between;
   padding: 7px 12px;
   position: relative;
-  border-radius: 17px;
   margin: 0 10px;
   padding-right: 35px;
   font-family: Ubuntu;
+  border-radius: 6px;
   cursor: pointer;
   .iconfont {
     opacity: 0;
@@ -318,8 +318,8 @@ const TopicCount = styled.div`
 `
 
 const SearchContainer = styled.div`
-  margin: 0 10px;
+  margin: 12px 10px;
-  margin-bottom: 10px;
+  margin-top: 2px;
 `
 
 const CommandKey = styled.div`

src/renderer/src/pages/home/Tabs/Topics.tsx

@@ -38,8 +38,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   const generating = useAppSelector((state) => state.runtime.generating)
   const { showTopicTime, topicPosition } = useSettings()
 
-  const borderRadius = showTopicTime ? 12 : 17
-
   const onDeleteTopic = useCallback(
     (topic: Topic) => {
       if (generating) {
@@ -192,10 +190,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
           const isActive = topic.id === activeTopic?.id
           return (
             <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-              <TopicListItem
+              <TopicListItem className={isActive ? 'active' : ''} onClick={() => onSwitchTopic(topic)}>
-                className={isActive ? 'active' : ''}
-                style={{ borderRadius }}
-                onClick={() => onSwitchTopic(topic)}>
                 <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
                 {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
                 {isActive && (
@@ -230,7 +225,7 @@ const Container = styled(Scrollbar)`
 const TopicListItem = styled.div`
   padding: 7px 12px;
   margin: 0 10px;
-  border-radius: 17px;
+  border-radius: 6px;
   font-family: Ubuntu;
   font-size: 13px;
   display: flex;

src/renderer/src/store/index.ts

@@ -24,7 +24,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 42,
+    version: 43,
     blacklist: ['runtime'],
     migrate
   },

src/renderer/src/store/migrate.ts

@@ -693,6 +693,12 @@ const migrateConfig = {
   '42': (state: RootState) => {
     state.settings.proxyMode = state.settings.proxyUrl ? 'custom' : 'none'
     return state
+  },
+  '43': (state: RootState) => {
+    if (state.settings.proxyMode === 'none') {
+      state.settings.proxyMode = 'system'
+    }
+    return state
   }
 }
 

src/renderer/src/store/settings.ts

@@ -41,7 +41,7 @@ const initialState: SettingsState = {
   showTopics: true,
   sendMessageShortcut: 'Enter',
   language: navigator.language as LanguageVarious,
-  proxyMode: 'none',
+  proxyMode: 'system',
   proxyUrl: undefined,
   userName: '',
   showMessageDivider: false,