2025-12-02 21:59:51 +08:00 · 2025-12-02 21:59:51 +08:00 · 65c0033cca
parent fd4aff76a1
commit 65c0033cca
2 changed files with 195 additions and 15 deletions
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@ -348,8 +348,9 @@

 /* Gradient Page Backgrounds - Enhanced visibility */
 .gradient-page-bg {
-  background: linear-gradient(135deg, 
-    rgba(102, 126, 234, 0.12) 0%, 
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.12) 0%,
    rgba(240, 242, 255, 0.8) 25%,
    rgba(255, 240, 245, 0.8) 50%,
    rgba(245, 240, 255, 0.8) 75%,
@ -359,8 +360,9 @@
 }

 .dark .gradient-page-bg {
-  background: linear-gradient(135deg, 
-    rgba(76, 81, 191, 0.25) 0%, 
+  background: linear-gradient(
+    135deg,
+    rgba(76, 81, 191, 0.25) 0%,
    rgba(30, 30, 45, 0.95) 25%,
    rgba(40, 30, 45, 0.95) 50%,
    rgba(35, 30, 50, 0.95) 75%,
@ -531,3 +533,183 @@
  border-color: rgba(76, 81, 191, 0.5);
  box-shadow: 0 10px 40px rgba(76, 81, 191, 0.3);
 }
+
+/* ========================================
+   DATE PICKER CUSTOM STYLING
+   ======================================== */
+
+/* Modern Date Input Styling */
+input[type="date"] {
+  position: relative;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--foreground);
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.05) 0%,
+    rgba(118, 75, 162, 0.05) 100%
+  );
+  border: 2px solid rgba(102, 126, 234, 0.3);
+  border-radius: 0.75rem;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+input[type="date"]:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.1) 0%,
+    rgba(118, 75, 162, 0.1) 100%
+  );
+  border-color: rgba(102, 126, 234, 0.5);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+  transform: translateY(-2px);
+}
+
+input[type="date"]:focus {
+  outline: none;
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.15) 0%,
+    rgba(118, 75, 162, 0.15) 100%
+  );
+  border-color: rgba(102, 126, 234, 0.6);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1),
+    0 8px 16px rgba(102, 126, 234, 0.25);
+  transform: translateY(-2px);
+}
+
+/* Dark mode date input */
+.dark input[type="date"] {
+  background: linear-gradient(
+    135deg,
+    rgba(76, 81, 191, 0.15) 0%,
+    rgba(85, 60, 154, 0.15) 100%
+  );
+  border-color: rgba(76, 81, 191, 0.4);
+}
+
+.dark input[type="date"]:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(76, 81, 191, 0.2) 0%,
+    rgba(85, 60, 154, 0.2) 100%
+  );
+  border-color: rgba(76, 81, 191, 0.6);
+  box-shadow: 0 4px 12px rgba(76, 81, 191, 0.3);
+}
+
+.dark input[type="date"]:focus {
+  background: linear-gradient(
+    135deg,
+    rgba(76, 81, 191, 0.25) 0%,
+    rgba(85, 60, 154, 0.25) 100%
+  );
+  border-color: rgba(76, 81, 191, 0.7);
+  box-shadow: 0 0 0 3px rgba(76, 81, 191, 0.15),
+    0 8px 16px rgba(76, 81, 191, 0.35);
+}
+
+/* Calendar icon styling */
+input[type="date"]::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  filter: brightness(0.9);
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+  background: rgba(102, 126, 234, 0.15);
+  transform: scale(1.1);
+  filter: brightness(1.1);
+}
+
+.dark input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1) brightness(0.9);
+}
+
+.dark input[type="date"]::-webkit-calendar-picker-indicator:hover {
+  background: rgba(76, 81, 191, 0.25);
+  filter: invert(1) brightness(1.1);
+}
+
+/* Date input inner elements (webkit) */
+input[type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+input[type="date"]::-webkit-datetime-edit-text {
+  padding: 0 0.25rem;
+  opacity: 0.7;
+}
+
+input[type="date"]::-webkit-datetime-edit-month-field,
+input[type="date"]::-webkit-datetime-edit-day-field,
+input[type="date"]::-webkit-datetime-edit-year-field {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+}
+
+input[type="date"]::-webkit-datetime-edit-month-field:hover,
+input[type="date"]::-webkit-datetime-edit-day-field:hover,
+input[type="date"]::-webkit-datetime-edit-year-field:hover {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--foreground);
+}
+
+input[type="date"]::-webkit-datetime-edit-month-field:focus,
+input[type="date"]::-webkit-datetime-edit-day-field:focus,
+input[type="date"]::-webkit-datetime-edit-year-field:focus {
+  background: rgba(102, 126, 234, 0.25);
+  color: var(--foreground);
+  outline: none;
+}
+
+.dark input[type="date"]::-webkit-datetime-edit-month-field:hover,
+.dark input[type="date"]::-webkit-datetime-edit-day-field:hover,
+.dark input[type="date"]::-webkit-datetime-edit-year-field:hover {
+  background: rgba(76, 81, 191, 0.3);
+}
+
+.dark input[type="date"]::-webkit-datetime-edit-month-field:focus,
+.dark input[type="date"]::-webkit-datetime-edit-day-field:focus,
+.dark input[type="date"]::-webkit-datetime-edit-year-field:focus {
+  background: rgba(76, 81, 191, 0.35);
+}
+
+/* Placeholder styling when empty */
+input[type="date"]:invalid::-webkit-datetime-edit {
+  color: var(--muted-foreground);
+}
+
+/* Animation for date picker open */
+@keyframes datePickerSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Additional polish */
+input[type="date"]::before {
+  content: attr(placeholder);
+  width: 100%;
+  color: var(--muted-foreground);
+}
+
+input[type="date"]:focus::before,
+input[type="date"]:valid::before {
+  display: none;
+}
--- a/frontend/components/analysis/AnalysisForm.tsx
+++ b/frontend/components/analysis/AnalysisForm.tsx
@ -58,14 +58,14 @@ const formSchema = z.object({
    .url("請輸入有效的 URL")
    .optional()
    .or(z.literal("")),
-  quick_think_api_key: z.string().optional().or(z.literal("")),
-  deep_think_api_key: z.string().optional().or(z.literal("")),
+  quick_think_api_key: z.string().min(1, "請輸入快速思維模型 API Key"),
+  deep_think_api_key: z.string().min(1, "請輸入深層思維模型 API Key"),
  embedding_base_url: z
    .string()
    .url("請輸入有效的 URL")
    .optional()
    .or(z.literal("")),
-  embedding_api_key: z.string().optional().or(z.literal("")),
+  embedding_api_key: z.string().min(1, "請輸入嵌入模型 API Key"),
  alpha_vantage_api_key: z.string().min(1, "請輸入 Alpha Vantage API Key"),
 });

@ -586,12 +586,12 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                name="quick_think_api_key"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>快速思維模型 API Key</FormLabel>
+                    <FormLabel>快速思維模型 API Key *</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>
-                      該模型的專屬 API Key（若留空則使用預設/環境變數）
+                      該模型的專屬 API Key（必填）
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
@ -685,12 +685,12 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                name="deep_think_api_key"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>深層思維模型 API Key</FormLabel>
+                    <FormLabel>深層思維模型 API Key *</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>
-                      該模型的專屬 API Key（若留空則使用預設/環境變數）
+                      該模型的專屬 API Key（必填）
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
@ -756,13 +756,11 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                name="embedding_api_key"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>嵌入模型 API Key</FormLabel>
+                    <FormLabel>嵌入模型 API Key *</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
-                    <FormDescription>
-                      該端點的 API Key（若留空則使用環境變數 OPENAI_API_KEY）
-                    </FormDescription>
+                    <FormDescription>該端點的 API Key（必填）</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}