init

Author: AnotiaWang

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,82 @@
+# Deep Research Web UI
+
+This is a web UI for https://github.com/dzhng/deep-research. It supports streaming AI responses, and viasualization of the research process using a tree structure.
+
+Note: The project is currently WIP, expect bugs. README will be updated once the project is usable.
+
+Rough preview of the UI: 
+
+<img width="1087" alt="image" src="https://github.com/user-attachments/assets/4bb5b722-0300-4d4f-bb01-fc1ed2404442" />
+
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'violet',
+    },
+  },
+})

app.vue

@@ -0,0 +1,49 @@
+<template>
+  <UApp :locale="zh_cn">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+import { zh_cn } from '@nuxt/ui/locale'
+
+// const colorMode = useColorMode()
+
+// TODO
+useHead({
+  title: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
+  meta: [
+    { name: 'description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
+    { name: 'keywords', content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具' },
+    // Open Graph tags
+    { property: 'og:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
+    { property: 'og:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
+    { property: 'og:type', content: 'website' },
+    { property: 'og:image', content: '/images/readme-showcase-total.webp' },
+    // Twitter Card tags
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
+    { name: 'twitter:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。' },
+    { name: 'twitter:image', content: '/images/readme-showcase-total.webp' },
+  ],
+  // script: [
+  //   {
+  //     defer: true,
+  //     src: 'https://umami.ataw.top/script.js',
+  //     'data-website-id': '6be07672-962f-42fe-85fc-92e96a5f30d6',
+  //   },
+  // ],
+})
+
+// onMounted(() => {
+//   watchEffect(() => {
+//     if (colorMode.value === 'dark') {
+//       document.documentElement.setAttribute('theme-mode', 'dark')
+//     } else {
+//       document.documentElement.removeAttribute('theme-mode')
+//     }
+//   })
+// })
+</script>

assets/css/main.css

@@ -0,0 +1,9 @@
+/* Don't do `@import "tailwindcss"`, do this instead: */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme" layer(theme) theme(static);
+@import "tailwindcss/preflight" layer(base);
+@import "tailwindcss/utilities" layer(utilities);
+
+/* Then import "@nuxt/ui": */
+@import "@nuxt/ui";

components/ColorModeButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { usePreferredColorScheme } from '@vueuse/core'
+
+  const colorMode = useColorMode()
+  const preferredColor = usePreferredColorScheme()
+  const preference = computed(() => {
+    // 默认为自动，会跟随用户的浏览器切换
+    if (colorMode.preference === 'system') {
+      return preferredColor.value
+    }
+    return colorMode.preference
+  })
+
+  const toggleColorMode = () => {
+    colorMode.preference = preference.value === 'light' ? 'dark' : 'light'
+  }
+</script>
+
+<template>
+  <div>
+    <UButton
+      :icon="
+        preference === 'dark'
+          ? 'i-heroicons-sun-20-solid'
+          : 'i-heroicons-moon-20-solid'
+      "
+      color="primary"
+      @click="toggleColorMode"
+    />
+  </div>
+</template>