Merge pull request #933 from iOfficeAI/feat/homepage-guid-ui

feat(guid,layout): homepage UX and sidebar tweaks

Author: IceyLiu

src/renderer/pages/guid/index.module.css

@@ -28,6 +28,28 @@
   min-width: 0;
 }
 
+/* 首页输入框下方「模型 / 模式」按钮：弱化视觉，不抢主输入区 */
+.actionTools :global(.sendbox-model-btn) {
+  background-color: transparent !important;
+  border: 1px solid var(--border-base) !important;
+  color: var(--color-text-2) !important;
+}
+
+.actionTools :global(.sendbox-model-btn:hover) {
+  background-color: var(--color-fill-2) !important;
+  border-color: var(--color-border-2) !important;
+  color: var(--color-text-1) !important;
+}
+
+/* 暗色模式：边框用稍亮色，否则与背景融在一起看不见 */
+[data-theme='dark'] .actionTools :global(.sendbox-model-btn) {
+  border-color: var(--bg-4) !important;
+}
+
+[data-theme='dark'] .actionTools :global(.sendbox-model-btn:hover) {
+  border-color: var(--bg-5) !important;
+}
+
 .actionSubmit {
   display: flex;
   align-items: center;
@@ -94,6 +116,11 @@
   position: relative;
 }
 
+/* 整体内容块略往上移，减轻「重心偏下」的感觉 */
+.guidContainer .guidLayout {
+  margin-top: -5vh;
+}
+
 @media (max-width: 768px) {
   .guidContainer {
     justify-content: flex-start;
@@ -102,6 +129,10 @@
     padding-top: 20px;
     -webkit-overflow-scrolling: touch;
   }
+
+  .guidContainer .guidLayout {
+    margin-top: 0;
+  }
 }
 
 /* 浅色占位符 */

src/renderer/pages/guid/index.tsx

@@ -862,11 +862,11 @@ const Guid: React.FC = () => {
   const handleInputChange = useCallback(
     (value: string) => {
       setInput(value);
+      // 首页不根据输入 @ 呼起 mention 列表，占位符里的 @agent 仅为提示，选 agent 用顶部栏或下拉手动选
       const match = value.match(mentionMatchRegex);
       if (match) {
         setMentionQuery(match[1]);
-        setMentionOpen(true);
-        setMentionSelectorOpen(false);
+        setMentionOpen(false);
       } else {
         setMentionQuery(null);
         setMentionOpen(false);
@@ -1431,17 +1431,18 @@ const Guid: React.FC = () => {
     <ConfigProvider getPopupContainer={() => guidContainerRef.current || document.body}>
       <div ref={guidContainerRef} className={styles.guidContainer}>
         <div className={styles.guidLayout}>
-          <p className={`text-2xl font-semibold mb-8 text-0 text-center`}>{t('conversation.welcome.title')}</p>
+          <p className={`text-2xl font-semibold mb-6 text-0 text-center`}>{t('conversation.welcome.title')}</p>
 
           {/* Agent 选择器 - 在标题下方 */}
           {availableAgents && availableAgents.length > 0 && (
             <div className='w-full flex justify-center'>
               <div
-                className='inline-flex items-center bg-fill-2'
+                className='flex flex-wrap items-center justify-center'
                 style={{
-                  marginBottom: 16,
-                  padding: '4px',
+                  marginBottom: 20,
+                  padding: '6px',
                   borderRadius: '30px',
+                  backgroundColor: 'var(--color-guid-agent-bar, var(--aou-2))',
                   transition: 'all 0.6s cubic-bezier(0.2, 0.8, 0.3, 1)',
                   width: 'fit-content',
                   gap: 0,
@@ -1532,7 +1533,7 @@ const Guid: React.FC = () => {
                 </Dropdown>
               </div>
             )}
-            <Input.TextArea autoSize={{ minRows: 3, maxRows: 20 }} placeholder={typewriterPlaceholder || t('conversation.welcome.placeholder')} className={`text-16px focus:b-none rounded-xl !bg-transparent !b-none !resize-none !p-0 ${styles.lightPlaceholder}`} value={input} onChange={handleInputChange} onPaste={onPaste} onFocus={handleTextareaFocus} onBlur={handleTextareaBlur} {...compositionHandlers} onKeyDown={handleInputKeyDown}></Input.TextArea>
+            <Input.TextArea autoSize={{ minRows: 3, maxRows: 20 }} placeholder={`${selectedAgentLabel}, ${typewriterPlaceholder || t('conversation.welcome.placeholder')}`} className={`text-16px focus:b-none rounded-xl !bg-transparent !b-none !resize-none !p-0 ${styles.lightPlaceholder}`} value={input} onChange={handleInputChange} onPaste={onPaste} onFocus={handleTextareaFocus} onBlur={handleTextareaBlur} {...compositionHandlers} onKeyDown={handleInputKeyDown}></Input.TextArea>
             {mentionOpen && (
               <div className='absolute z-50' style={{ left: 16, top: 44 }}>
                 {mentionMenu}
@@ -1598,7 +1599,7 @@ const Guid: React.FC = () => {
                   }
                 >
                   <span className='flex items-center gap-4px cursor-pointer lh-[1]'>
-                    <Button type='text' shape='circle' className={isPlusDropdownOpen ? styles.plusButtonRotate : ''} icon={<Plus theme='outline' size='14' strokeWidth={2} fill={iconColors.primary} />}></Button>
+                    <Button type='text' shape='circle' className={`sendbox-model-btn ${isPlusDropdownOpen ? styles.plusButtonRotate : ''}`} icon={<Plus theme='outline' size='14' strokeWidth={2} fill={iconColors.primary} />}></Button>
                     {files.length > 0 && (
                       <Tooltip className={'!max-w-max'} content={<span className='whitespace-break-spaces'>{getCleanFileNames(files).join('\n')}</span>}>
                         <span className='text-t-primary'>File({files.length})</span>

src/renderer/styles/themes/base.css

@@ -257,6 +257,8 @@ body,
 /* Layout sider base styles / 布局侧栏基础样式 */
 .layout-sider {
   overflow-x: hidden;
+  box-shadow: none !important;
+  border-right: 1px solid var(--border-base);
 }
 
 .layout-sider.collapsed .arco-layout-sider-children,

src/renderer/styles/themes/color-schemes/default.css

@@ -68,13 +68,15 @@
   --fill-0: #ffffff; /* 填充色 0 */
   --fill-white-to-black: #ffffff; /* 白到黑填充色 */
   --border-special: var(--bg-3); /* 特殊边框色 */
+  --color-guid-agent-bar: #eaecf7; /* 首页 Agent 选择条背景 - 亮色 */
 }
 
 /* Dark Mode */
 [data-color-scheme='default'][data-theme='dark'] {
   /* AOU Brand Colors - Dark Mode */
   --aou-1: #2a2a2a;
   --aou-2: #3d4150;
+  --color-guid-agent-bar: var(--aou-2); /* 首页 Agent 选择条背景 - 暗色沿用 aou-2 */
   --aou-3: #525a77;
   --aou-4: #6a749b;
   --aou-5: #838fba;