@wwkit/freetoken 1.0.1

package/client/public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/client/src/App.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { computed } from 'vue'
+import { RouterView, RouterLink } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
+import LangSwitch from './components/LangSwitch.vue'
+import OsSwitch from './components/OsSwitch.vue'
+
+const route = useRoute()
+const { t, locale } = useI18n()
+
+const elLocale = computed(() => (locale.value === 'zh-CN' ? zhCn : en))
+
+const navItems = computed(() => [
+  { index: '/', label: t('nav.home') },
+  { index: '/harness', label: t('nav.harness') },
+  { index: '/free-models', label: t('nav.freeModels') },
+  { index: '/proxy', label: t('nav.proxy') },
+  { index: '/token-market', label: t('nav.tokenMarket') },
+  { index: '/docs', label: t('nav.docs') },
+  { index: '/admin/models', label: '管理' },
+])
+</script>
+
+<template>
+  <el-config-provider :locale="elLocale">
+    <el-container class="app-container">
+      <el-header class="app-header">
+        <RouterLink to="/" class="logo">
+          <span class="logo-icon">AI</span>
+          <span class="logo-text">FreeToken</span>
+        </RouterLink>
+        <el-menu
+          mode="horizontal"
+          :default-active="route.path"
+          :ellipsis="false"
+          router
+          class="app-menu"
+        >
+          <el-menu-item
+            v-for="item in navItems"
+            :key="item.index"
+            :index="item.index"
+          >
+            {{ item.label }}
+          </el-menu-item>
+        </el-menu>
+        <div class="header-actions">
+          <OsSwitch class="os-switch" />
+          <LangSwitch class="lang-switch" />
+        </div>
+      </el-header>
+      <el-main class="app-main">
+        <RouterView />
+      </el-main>
+      <el-footer class="app-footer">
+        <p>{{ $t('footer.tagline') }}</p>
+        <p class="footer-note">{{ $t('footer.note') }}</p>
+      </el-footer>
+    </el-container>
+  </el-config-provider>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+}
+.app-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--el-border-color);
+  padding: 0 24px;
+  height: 60px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  margin-right: 40px;
+  flex-shrink: 0;
+}
+.logo-icon {
+  background: var(--el-color-primary);
+  color: #fff;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+}
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.app-menu {
+  border-bottom: none !important;
+  flex: 1;
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+}
+.lang-switch {
+  flex-shrink: 0;
+}
+.app-main {
+  max-width: 1600px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+.app-footer {
+  text-align: center;
+  padding: 24px;
+  border-top: 1px solid var(--el-border-color);
+}
+.app-footer p {
+  margin: 4px 0;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+.footer-note {
+  font-size: 12px !important;
+  opacity: 0.7;
+}
+</style>

package/client/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/client/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/client/src/components/ChatBox.vue

@@ -0,0 +1,320 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue'
+import { marked } from 'marked'
+import { Loading } from '@element-plus/icons-vue'
+import axios from 'axios'
+
+const props = defineProps({
+  baseUrl: {
+    type: String,
+    required: true
+  },
+  apiKey: {
+    type: String,
+    required: true
+  },
+  model: {
+    type: String,
+    default: 'MiniMax-M2.7'
+  },
+  provider: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '输入消息开始对话...'
+  },
+  useProxy: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const messages = ref([])
+const inputMessage = ref('')
+const isLoading = ref(false)
+const chatContainer = ref(null)
+const cancelTokenSource = ref(null)
+
+const apiUrl = computed(() => {
+  if (props.useProxy && props.provider) {
+    return `/api/proxy/${props.provider}`
+  }
+  return props.baseUrl
+})
+
+const sendMessage = async () => {
+  if (!inputMessage.value.trim() || isLoading.value) return
+
+  const userMessage = {
+    role: 'user',
+    content: inputMessage.value.trim()
+  }
+
+  messages.value.push(userMessage)
+  const currentInput = inputMessage.value
+  inputMessage.value = ''
+  isLoading.value = true
+  cancelTokenSource.value = axios.CancelToken.source()
+
+  try {
+    const response = await axios.post(
+      `${apiUrl.value}/chat/completions`,
+      {
+        model: props.model,
+        messages: messages.value.map(m => ({
+          role: m.role,
+          content: m.content
+        })),
+        max_tokens: 1024
+      },
+      {
+        headers: {
+          'Authorization': `Bearer ${props.apiKey}`,
+          'Content-Type': 'application/json'
+        },
+        timeout: 60000,
+        cancelToken: cancelTokenSource.value.token
+      }
+    )
+
+    const assistantMessage = {
+      role: 'assistant',
+      content: response.data.choices[0].message.content
+    }
+    messages.value.push(assistantMessage)
+  } catch (error) {
+    console.error('API call failed:', error)
+    
+    if (axios.isCancel(error)) {
+      messages.value.push({
+        role: 'assistant',
+        content: '请求已取消'
+      })
+    } else {
+      let errorMessage = '请求失败'
+      
+      if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+        errorMessage = '请求超时（60秒），API 响应时间过长，请稍后重试或检查网络连接'
+      } else if (error.response) {
+        errorMessage = `错误: ${error.response.status} - ${error.response.data?.error?.message || '未知错误'}`
+      } else if (error.request) {
+        errorMessage = '网络错误，无法连接到 API 服务器'
+      } else {
+        errorMessage = `错误: ${error.message}`
+      }
+      
+      messages.value.push({
+        role: 'assistant',
+        content: errorMessage
+      })
+    }
+  } finally {
+    isLoading.value = false
+    await nextTick()
+    scrollToBottom()
+  }
+}
+
+const scrollToBottom = () => {
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+  }
+}
+
+const clearMessages = () => {
+  messages.value = []
+}
+
+const cancelRequest = () => {
+  if (cancelTokenSource.value) {
+    cancelTokenSource.value.cancel('用户取消请求')
+    isLoading.value = false
+  }
+}
+
+defineExpose({
+  clearMessages
+})
+
+const renderMarkdown = (content) => {
+  return marked(content)
+}
+
+watch(messages, () => {
+  nextTick(() => scrollToBottom())
+}, { deep: true })
+</script>
+
+<template>
+  <div class="chat-box">
+    <div class="chat-messages" ref="chatContainer">
+      <div v-if="messages.length === 0" class="empty-state">
+        <p>{{ placeholder }}</p>
+      </div>
+      <div
+        v-for="(message, index) in messages"
+        :key="index"
+        :class="['message', `message-${message.role}`]"
+      >
+        <div class="message-avatar">
+          <el-avatar v-if="message.role === 'user'" :size="28">U</el-avatar>
+          <el-avatar v-else :size="28" style="background: #409eff">AI</el-avatar>
+        </div>
+        <div class="message-content">
+          <div v-html="renderMarkdown(message.content)" class="message-text"></div>
+        </div>
+      </div>
+      <div v-if="isLoading" class="message message-assistant">
+        <div class="message-avatar">
+          <el-avatar :size="28" style="background: #409eff">AI</el-avatar>
+        </div>
+        <div class="message-content">
+          <div class="loading-indicator">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            <span>正在思考...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="chat-input">
+      <el-input
+        v-model="inputMessage"
+        :placeholder="placeholder"
+        @keyup.enter="sendMessage"
+        :disabled="isLoading"
+      >
+        <template #append>
+          <el-button v-if="!isLoading" @click="sendMessage" :disabled="!inputMessage.trim()">
+            发送
+          </el-button>
+          <el-button v-else @click="cancelRequest" type="danger">
+            取消
+          </el-button>
+        </template>
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-box {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  background: var(--el-bg-color);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--el-fill-color-blank);
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+}
+
+.message {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.message-user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-text {
+  padding: 8px 12px;
+  border-radius: 6px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+  font-size: 13px;
+}
+
+.message-user .message-text {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.message-assistant .message-text {
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-primary);
+}
+
+.message-text :deep(pre) {
+  background: var(--el-fill-color);
+  padding: 8px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 12px;
+}
+
+.message-text :deep(code) {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 12px;
+}
+
+.message-text :deep(p) {
+  margin: 4px 0;
+}
+
+.message-text :deep(ul),
+.message-text :deep(ol) {
+  margin: 4px 0;
+  padding-left: 20px;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 6px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.chat-input {
+  padding: 12px;
+  border-top: 1px solid var(--el-border-color-light);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.chat-input .el-input {
+  flex: 1;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+</style>

package/client/src/components/CheckList.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineProps({
+  items: { type: Array, default: () => [] },
+  small: { type: Boolean, default: false },
+})
+</script>
+
+<template>
+  <ul class="check-list" :class="{ 'check-list--small': small }">
+    <li v-for="(item, i) in items" :key="i" class="check-item">
+      <el-icon class="check-icon"><Select /></el-icon>
+      <span class="check-text">{{ item }}</span>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.check-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.check-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 0;
+}
+.check-icon {
+  color: var(--el-color-success);
+  font-size: 16px;
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.check-text {
+  line-height: 1.6;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+}
+
+.check-list--small .check-item {
+  padding: 3px 0;
+}
+.check-list--small .check-icon {
+  font-size: 14px;
+  margin-top: 2px;
+}
+.check-list--small .check-text {
+  font-size: 13px;
+  line-height: 1.5;
+}
+</style>

package/client/src/components/CodeBlock.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref } from 'vue'
+import { useClipboard } from '../composables/useClipboard'
+
+const props = defineProps({
+  code: { type: String, default: '' },
+  lang: { type: String, default: 'bash' },
+  filename: { type: String, default: '' },
+  copyText: { type: String, default: '' },
+})
+
+const { copy } = useClipboard()
+const copied = ref(false)
+
+function stripComments(code) {
+  return code
+    .split('\n')
+    .filter(line => {
+      const trimmed = line.trim()
+      return trimmed && !trimmed.startsWith('#') && !trimmed.startsWith('//')
+    })
+    .join('\n')
+    .trim()
+}
+
+function handleCopy() {
+  const text = props.copyText || props.code
+  copy(stripComments(text))
+  copied.value = true
+  setTimeout(() => (copied.value = false), 2000)
+}
+</script>
+
+<template>
+  <div class="code-block">
+    <div class="code-block-header">
+      <input
+        v-if="filename"
+        class="code-filename"
+        :value="filename"
+      />
+      <span v-else class="code-lang">{{ lang }}</span>
+      <el-button text size="small" :icon="copied ? 'Check' : 'DocumentCopy'" @click="handleCopy">
+        {{ copied ? $t('common.copied') : $t('common.copy') }}
+      </el-button>
+    </div>
+    <pre><code :class="`language-${lang}`">{{ code }}</code></pre>
+  </div>
+</template>
+
+<style scoped>
+.code-block {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  background: #1e1e1e;
+}
+.code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #404040;
+  gap: 8px;
+}
+.code-filename {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #ccc;
+  font-size: 12px;
+  font-family: ui-monospace, Consolas, monospace;
+  padding: 2px 0;
+}
+.code-filename:focus {
+  color: #fff;
+  border-bottom: 1px solid #555;
+}
+.code-lang {
+  color: #999;
+  font-size: 12px;
+  font-family: ui-monospace, Consolas, monospace;
+}
+.code-block pre {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+  background: #1e1e1e;
+}
+.code-block code {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  white-space: pre;
+}
+</style>