Feat/UI redesign p3

vocata-web/src/assets/styles/theme.css

@@ -1,27 +1,84 @@
 :root {
   color-scheme: light;
-  --vt-bg: oklch(98% 0.01 190);
+
+  /* Backgrounds */
+  --vt-bg: oklch(98% 0.005 240);
   --vt-surface: oklch(100% 0 0);
-  --vt-surface-muted: oklch(97% 0.01 190);
-  --vt-line: oklch(90% 0.02 190);
-  --vt-text: oklch(28% 0.03 210);
-  --vt-text-soft: oklch(48% 0.03 210);
-  --vt-brand: oklch(74% 0.09 183);
-  --vt-brand-strong: oklch(64% 0.11 183);
-  --vt-accent: oklch(74% 0.14 32);
-  --vt-radius-xl: 28px;
-  --vt-radius-lg: 20px;
-  --vt-shadow: 0 24px 60px color-mix(in srgb, var(--vt-brand) 12%, transparent);
+  --vt-surface-raised: oklch(99% 0.005 240);
+  --vt-surface-overlay: oklch(96% 0.008 240);
+
+  /* Borders */
+  --vt-line: oklch(91% 0.01 240);
+  --vt-line-subtle: oklch(95% 0.008 240);
+
+  /* Text */
+  --vt-text: oklch(15% 0.02 240);
+  --vt-text-soft: oklch(45% 0.02 240);
+  --vt-text-muted: oklch(65% 0.015 240);
+
+  /* Brand (紫蓝，类 GPT) */
+  --vt-brand: oklch(55% 0.18 270);
+  --vt-brand-soft: oklch(92% 0.05 270);
+  --vt-brand-strong: oklch(45% 0.20 270);
+
+  /* Accent & Semantic */
+  --vt-accent: oklch(68% 0.16 32);
+  --vt-danger: oklch(60% 0.20 25);
+  --vt-success: oklch(60% 0.16 145);
+
+  /* Radius */
+  --vt-radius-sm: 8px;
+  --vt-radius-md: 12px;
+  --vt-radius-lg: 16px;
+  --vt-radius-xl: 24px;
+
+  /* Shadows */
+  --vt-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
+  --vt-shadow-md: 0 4px 16px oklch(0% 0 0 / 0.10);
+  --vt-shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.12);
+
+  /* Legacy aliases (backward compat) */
+  --vt-surface-muted: var(--vt-surface-overlay);
+  --vt-brand-strong-legacy: var(--vt-brand-strong);
+  --vt-shadow: var(--vt-shadow-lg);
+  --vt-radius: var(--vt-radius-xl);
+
+  /* Typography */
   --vt-font-body:
     'PingFang SC',
     'Hiragino Sans GB',
     'Microsoft YaHei',
     'Noto Sans CJK SC',
     sans-serif;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }
 
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --vt-bg: oklch(12% 0.01 240);
+  --vt-surface: oklch(16% 0.01 240);
+  --vt-surface-raised: oklch(20% 0.01 240);
+  --vt-surface-overlay: oklch(22% 0.015 240);
+
+  --vt-line: oklch(28% 0.01 240);
+  --vt-line-subtle: oklch(24% 0.01 240);
+
+  --vt-text: oklch(95% 0.005 240);
+  --vt-text-soft: oklch(70% 0.01 240);
+  --vt-text-muted: oklch(50% 0.01 240);
+
+  --vt-brand: oklch(65% 0.18 270);
+  --vt-brand-soft: oklch(25% 0.08 270);
+  --vt-brand-strong: oklch(75% 0.20 270);
+
+  --vt-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.3);
+  --vt-shadow-md: 0 4px 16px oklch(0% 0 0 / 0.4);
+  --vt-shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.5);
+}
+
 * {
   box-sizing: border-box;
 }

vocata-web/src/components/chat/ChatComposer.vue

@@ -5,31 +5,36 @@
         type="button"
         class="chat-composer__tool"
         data-test="composer-mic"
-        :title="recording ? '挂断通话' : '录音输入'"
+        :title="recording ? '挂断通话' : '开始语音对话'"
         @click="$emit('toggleCall')"
       >
-        <span class="chat-composer__icon">🎙</span>
+        <el-icon><Microphone /></el-icon>
       </button>
 
       <div class="chat-composer__field">
         <textarea
           :value="modelValue"
           :placeholder="connected ? '输入消息或开始语音陪聊…' : '连接中，请稍等…'"
           :disabled="!connected"
+          rows="1"
           @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
           @keydown.enter.prevent="$emit('send')"
         />
       </div>
+
       <div class="chat-composer__actions">
         <button
           type="button"
           class="chat-composer__primary"
           data-test="composer-primary"
+          :class="{ 'is-active': hasText }"
           :aria-label="hasText ? '发送消息' : '开始语音聊天'"
           :disabled="!connected"
           @click="handlePrimaryAction"
         >
-          <span class="chat-composer__icon">{{ hasText ? '↑' : recording ? '■' : '◉' }}</span>
+          <el-icon v-if="hasText"><Promotion /></el-icon>
+          <el-icon v-else-if="recording"><VideoPause /></el-icon>
+          <el-icon v-else><Microphone /></el-icon>
         </button>
       </div>
     </div>
@@ -55,19 +60,16 @@ const hasText = computed(() => props.modelValue.trim().length > 0)
 
 const handlePrimaryAction = () => {
   if (!props.connected) return
-
   if (hasText.value) {
     emit('send')
     return
   }
-
   emit('toggleCall')
 }
 </script>
 
 <style scoped lang="scss">
 .chat-composer {
-  display: block;
   width: 100%;
   max-width: 760px;
   margin: 0 auto;
@@ -77,45 +79,59 @@ const handlePrimaryAction = () => {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: end;
-  gap: 12px;
-  padding: 12px 14px;
-  border-radius: 32px;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid color-mix(in srgb, var(--vt-line) 72%, white);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 28px;
+  background: var(--vt-surface);
+  border: 1px solid var(--vt-line);
+  box-shadow: var(--vt-shadow-sm);
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &:focus-within {
+    border-color: var(--vt-brand);
+    box-shadow: 0 0 0 3px var(--vt-brand-soft);
+  }
 }
 
-.chat-composer__tool,
-.chat-composer__primary {
-  width: 48px;
-  height: 48px;
+.chat-composer__tool {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
   border: 0;
   border-radius: 50%;
-  display: inline-grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.chat-composer__tool {
   background: transparent;
   color: var(--vt-text-soft);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  font-size: 18px;
+
+  &:hover {
+    background: var(--vt-surface-overlay);
+    color: var(--vt-text);
+  }
 }
 
 .chat-composer__field {
   min-width: 0;
-}
 
-.chat-composer__field textarea {
-  width: 100%;
-  min-height: 28px;
-  max-height: 120px;
-  border: 0;
-  outline: 0;
-  resize: none;
-  background: transparent;
-  color: var(--vt-text);
-  font-size: 15px;
-  line-height: 1.6;
+  textarea {
+    width: 100%;
+    min-height: 24px;
+    max-height: 120px;
+    border: 0;
+    outline: 0;
+    resize: none;
+    background: transparent;
+    color: var(--vt-text);
+    font-size: 15px;
+    line-height: 1.6;
+    padding: 8px 0;
+
+    &::placeholder {
+      color: var(--vt-text-muted);
+    }
+  }
 }
 
 .chat-composer__actions {
@@ -124,27 +140,26 @@ const handlePrimaryAction = () => {
 }
 
 .chat-composer__primary {
-  background: var(--vt-brand);
-  color: white;
-}
-
-.chat-composer__primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.chat-composer__icon {
-  display: inline-grid;
+  display: grid;
   place-items: center;
-  width: 20px;
-  height: 20px;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--vt-surface-overlay);
+  color: var(--vt-text-soft);
+  cursor: pointer;
   font-size: 18px;
-  line-height: 1;
-}
+  transition: background 0.15s, color 0.15s;
+
+  &.is-active {
+    background: var(--vt-brand);
+    color: white;
+  }
 
-@media (max-width: 768px) {
-  .chat-composer__box {
-    grid-template-columns: auto minmax(0, 1fr) auto;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 }
 </style>