@wwkit/freetoken 1.0.1

package/client/src/views/HarnessView.vue

@@ -0,0 +1,314 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { harnessTools, npmMirrors } from '../data/harness/index.js'
+import PageHeader from '../components/PageHeader.vue'
+import CodeBlock from '../components/CodeBlock.vue'
+import DetailBlock from '../components/DetailBlock.vue'
+import LinkList from '../components/LinkList.vue'
+import { useOs } from '../composables/useOs'
+
+const { t } = useI18n()
+const { os } = useOs()
+
+const activeId = ref(harnessTools[0].id)
+const activeTool = ref(harnessTools[0])
+const activeSubTab = ref('install')
+const npmRegistry = ref('')
+
+const subTabs = computed(() => {
+  const tabs = [
+    { id: 'install', label: t('harness.install') },
+    { id: 'config', label: t('harness.config') },
+  ]
+  if (activeTool.value.startup) {
+    tabs.push({ id: 'startup', label: t('harness.startup') })
+  }
+  if (activeTool.value.sessionManagement) {
+    tabs.push({ id: 'session', label: t('harness.sessionManagement') })
+  }
+  if (activeTool.value.install.git) {
+    tabs.push({ id: 'develop', label: t('harness.develop') })
+  }
+  if (activeTool.value.requirements) {
+    tabs.push({ id: 'requirements', label: t('harness.requirements') })
+  }
+  return tabs
+})
+
+const curlCopyText = computed(() => {
+  if (!activeTool.value.install.curl) return ''
+  return activeTool.value.install.curl.copy[os.value]
+})
+
+const npmCopyText = computed(() => {
+  if (!activeTool.value.install.npm) return ''
+  const { pkg, verify } = activeTool.value.install.npm
+  if (!pkg || !verify) return ''
+  const sep = os.value === 'unix' ? ' && ' : '; '
+  const registry = npmRegistry.value
+  const flag = registry ? ` --registry=${registry}` : ''
+  return `npm install -g ${pkg}${flag}${sep}${verify}`
+})
+
+function selectTool(tool) {
+  activeId.value = tool.id
+  activeTool.value = tool
+  activeSubTab.value = 'install'
+}
+</script>
+
+<template>
+  <div class="harness-page">
+    <PageHeader
+      :title="$t('harness.pageTitle')"
+      :description="$t('harness.pageDesc')"
+    />
+
+    <el-tabs v-model="activeId" @tab-change="selectTool(harnessTools.find(t => t.id === activeId))">
+      <el-tab-pane
+        v-for="tool in harnessTools"
+        :key="tool.id"
+        :name="tool.id"
+      >
+        <template #label>
+          <span>{{ $t(tool.nameKey) }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div v-if="activeTool" class="tool-detail">
+      <div class="tool-header">
+        <h2 class="tool-name">{{ $t(activeTool.nameKey) }}</h2>
+        <el-tag>{{ $t(activeTool.badgeKey) }}</el-tag>
+      </div>
+      <p class="tool-tagline">{{ $t(activeTool.taglineKey) }}</p>
+      <p class="tool-description">{{ $t(activeTool.descriptionKey) }}</p>
+
+      <el-tabs v-model="activeSubTab" class="sub-tabs">
+        <el-tab-pane :label="subTabs[0].label" name="install">
+          <div class="install-section">
+            <DetailBlock v-if="activeTool.install.curl" :title="$t('harness.curlInstall')">
+              <CodeBlock
+                :code="activeTool.install.curl.display"
+                :copy-text="curlCopyText"
+                lang="bash"
+                filename="terminal"
+              />
+            </DetailBlock>
+
+            <DetailBlock v-if="activeTool.install.npm">
+              <template #header>
+                <div class="npm-header">
+                  <span class="npm-title">{{ $t('harness.npmInstall') }}</span>
+                  <el-select v-model="npmRegistry" size="small" :placeholder="$t('harness.npmMirrorPlaceholder')" class="registry-select">
+                    <el-option
+                      v-for="m in npmMirrors"
+                      :key="m.value"
+                      :label="$t(m.labelKey)"
+                      :value="m.value"
+                    />
+                  </el-select>
+                </div>
+              </template>
+              <CodeBlock
+                :code="activeTool.install.npm.display"
+                :copy-text="npmCopyText"
+                lang="bash"
+                filename="terminal"
+              />
+            </DetailBlock>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[1].label" name="config">
+          <DetailBlock :title="$t('harness.modelConfig')">
+            <CodeBlock :code="activeTool.config" :lang="activeTool.configFormat" :filename="activeTool.configFilename" />
+          </DetailBlock>
+          <DetailBlock v-if="activeTool.configTips" :title="$t('harness.configTips')">
+            <div v-for="(tip, index) in activeTool.configTips" :key="index" class="tip-item">
+              <span class="tip-text">{{ tip }}</span>
+            </div>
+          </DetailBlock>
+          <DetailBlock v-if="activeTool.modelSwitch" :title="$t('harness.modelSwitch')">
+            <template v-if="typeof activeTool.modelSwitch === 'string'">
+              <p class="model-switch-text">{{ activeTool.modelSwitch }}</p>
+            </template>
+            <template v-else>
+              <p class="model-switch-text">{{ activeTool.modelSwitch.description }}</p>
+              <div v-for="(method, index) in activeTool.modelSwitch.methods" :key="index" class="method-item">
+                <h4>{{ method.title }}</h4>
+                <p>{{ method.content }}</p>
+                <CodeBlock v-if="method.command" :code="method.command" lang="bash" filename="terminal" />
+                <CodeBlock v-if="method.example" :code="method.example" lang="json" filename="settings.json" />
+              </div>
+            </template>
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="activeTool.startup" :label="subTabs[2].label" name="startup">
+          <DetailBlock :title="$t('harness.startupCommand')">
+            <CodeBlock
+              :code="activeTool.startup.command"
+              lang="bash"
+              filename="terminal"
+            />
+          </DetailBlock>
+          <DetailBlock v-if="activeTool.startup.tips" :title="$t('harness.sessionOperations')">
+            <div v-for="(tip, index) in activeTool.startup.tips" :key="index" class="tip-item">
+              <span class="tip-text">{{ tip }}</span>
+            </div>
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="activeTool.sessionManagement" :label="subTabs[subTabs.findIndex(t => t.id === 'session')].label" name="session">
+          <DetailBlock :title="$t('harness.sessionExport')">
+            <CodeBlock
+              :code="activeTool.sessionManagement.export"
+              lang="bash"
+              filename="terminal"
+            />
+          </DetailBlock>
+          <DetailBlock :title="$t('harness.sessionImport')">
+            <CodeBlock
+              :code="activeTool.sessionManagement.import"
+              lang="bash"
+              filename="terminal"
+            />
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="activeTool.install.git" :label="subTabs[subTabs.findIndex(t => t.id === 'develop')].label" name="develop">
+          <DetailBlock :title="$t('harness.gitInstall')">
+            <CodeBlock
+              :code="activeTool.install.git.display"
+              lang="bash"
+              filename="terminal"
+            />
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="activeTool.requirements" :label="subTabs[subTabs.length - 1].label" name="requirements">
+          <div class="requirements-section">
+            <DetailBlock :title="$t('harness.nodeRequirement')">
+              <div class="requirement-item">
+                <span class="label">Node.js:</span>
+                <span class="value">{{ activeTool.requirements.node }}</span>
+              </div>
+            </DetailBlock>
+            <DetailBlock v-if="activeTool.requirements.envVars" :title="$t('harness.envRequirement')">
+              <div v-for="envVar in activeTool.requirements.envVars" :key="envVar" class="requirement-item">
+                <span class="label">{{ envVar }}:</span>
+                <span class="value">{{ $t('harness.envVarDesc') }}</span>
+              </div>
+            </DetailBlock>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <DetailBlock :title="$t('harness.relatedLinks')">
+        <LinkList :links="activeTool.links" />
+      </DetailBlock>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-detail {
+  margin-top: 16px;
+}
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.tool-name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+.tool-tagline {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+.tool-description {
+  margin: 0 0 24px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+}
+.sub-tabs {
+  margin-bottom: 24px;
+}
+.install-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.npm-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.npm-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.registry-select {
+  width: 160px;
+}
+.requirements-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.requirement-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+.requirement-item .label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.requirement-item .value {
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+.model-switch-text {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-regular);
+}
+.tip-item {
+  padding: 8px 0;
+}
+.tip-text {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-regular);
+}
+.method-item {
+  margin-top: 16px;
+  padding: 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+}
+.method-item h4 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.method-item p {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+</style>

package/client/src/views/HomeView.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import PageHeader from '../components/PageHeader.vue'
+
+const { t, tm } = useI18n()
+
+const sections = computed(() => [
+  {
+    to: '/harness',
+    title: t('home.sections.harness.title'),
+    desc: t('home.sections.harness.desc'),
+    icon: '🔧',
+  },
+  {
+    to: '/free-models',
+    title: t('home.sections.freeModels.title'),
+    desc: t('home.sections.freeModels.desc'),
+    icon: '🎁',
+  },
+  {
+    to: '/proxy',
+    title: t('home.sections.proxy.title'),
+    desc: t('home.sections.proxy.desc'),
+    icon: '🌐',
+  },
+])
+</script>
+
+<template>
+  <div class="home">
+    <section class="hero-section">
+      <h1>{{ $t('home.heroTitle') }}</h1>
+      <p class="hero-subtitle">{{ $t('home.heroSubtitle') }}</p>
+      <div class="hero-actions">
+        <el-button type="primary" size="large" tag="a" @click="$router.push('/harness')">
+          {{ $t('home.startLearning') }}
+        </el-button>
+        <el-button size="large" @click="$router.push('/free-models')">
+          {{ $t('home.freeModelsBtn') }}
+        </el-button>
+      </div>
+    </section>
+
+    <section class="cards-section">
+      <h2 class="section-title">{{ $t('home.sectionsTitle') }}</h2>
+      <el-row :gutter="20">
+        <el-col v-for="s in sections" :key="s.to" :xs="24" :sm="8">
+          <el-card shadow="hover" class="card">
+            <RouterLink :to="s.to" class="card-link">
+              <div class="card-icon">{{ s.icon }}</div>
+              <h3 class="card-title">{{ s.title }}</h3>
+              <p class="card-desc">{{ s.desc }}</p>
+              <span class="card-enter">{{ $t('home.cardEnter') }} &rarr;</span>
+            </RouterLink>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <section class="intro-section">
+      <h2 class="section-title">{{ $t('home.whatIsHarness') }}</h2>
+      <el-card shadow="never">
+        <div class="intro-content">
+          <p>{{ $t('home.introP1') }}</p>
+          <p>{{ $t('home.introP2') }}</p>
+          <p>{{ $t('home.introP3') }}</p>
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.hero-section {
+  text-align: center;
+  padding: 48px 0 32px;
+}
+.hero-section h1 {
+  margin: 0 0 12px;
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+.hero-subtitle {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
+  margin: 0 0 24px;
+}
+.hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+.cards-section {
+  margin: 32px 0;
+}
+.section-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin: 0 0 16px;
+}
+.card {
+  height: 100%;
+  transition: transform 0.2s;
+}
+.card:hover {
+  transform: translateY(-4px);
+}
+.card-link {
+  text-decoration: none;
+  display: block;
+}
+.card-icon {
+  font-size: 36px;
+  margin-bottom: 12px;
+}
+.card-title {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.card-desc {
+  margin: 0 0 12px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+.card-enter {
+  color: var(--el-color-primary);
+  font-size: 14px;
+}
+.intro-section {
+  margin: 32px 0;
+}
+.intro-content p {
+  margin: 0 0 12px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+}
+.intro-content p:last-child {
+  margin-bottom: 0;
+}
+</style>

package/client/src/views/ProxyView.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { proxySolutions } from '../data/proxy/index.js'
+import PageHeader from '../components/PageHeader.vue'
+import CodeBlock from '../components/CodeBlock.vue'
+import DetailBlock from '../components/DetailBlock.vue'
+import StepList from '../components/StepList.vue'
+import CheckList from '../components/CheckList.vue'
+
+const { t, tm } = useI18n()
+
+const activeId = ref(proxySolutions[0].id)
+const activeSolution = ref(proxySolutions[0])
+const activeSubTab = ref('steps')
+
+const subTabs = computed(() => [
+  { id: 'steps', label: t('proxy.steps') },
+  { id: 'config', label: t('proxy.configExample') },
+  { id: 'notes', label: t('proxy.notes') },
+])
+
+const stepsItems = computed(() => activeSolution.value.steps || [])
+const tipsItems = computed(() => activeSolution.value.tips || [])
+
+function selectSolution(s) {
+  activeId.value = s.id
+  activeSolution.value = s
+  activeSubTab.value = 'steps'
+}
+</script>
+
+<template>
+  <div class="proxy-page">
+    <PageHeader
+      :title="$t('proxy.pageTitle')"
+      :description="$t('proxy.pageDesc')"
+    />
+
+    <el-tabs v-model="activeId" @tab-change="selectSolution(proxySolutions.find(s => s.id === activeId))">
+      <el-tab-pane
+        v-for="s in proxySolutions"
+        :key="s.id"
+        :name="s.id"
+      >
+        <template #label>
+          <span>{{ s.name }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div v-if="activeSolution" class="solution-detail">
+      <div class="solution-header">
+        <h2 class="solution-name">{{ activeSolution.name }}</h2>
+        <el-tag type="warning">{{ activeSolution.badge }}</el-tag>
+      </div>
+      <p class="solution-tagline">{{ activeSolution.tagline }}</p>
+      <p class="solution-description">{{ activeSolution.description }}</p>
+
+      <el-tabs v-model="activeSubTab" class="sub-tabs">
+        <el-tab-pane :label="subTabs[0].label" name="steps">
+          <DetailBlock :title="$t('proxy.steps')">
+            <StepList :steps="stepsItems" small />
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[1].label" name="config">
+          <DetailBlock :title="$t('proxy.configExample')">
+            <CodeBlock :code="activeSolution.config" lang="bash" />
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[2].label" name="notes">
+          <DetailBlock :title="$t('proxy.notes')">
+            <CheckList :items="tipsItems" small />
+          </DetailBlock>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.solution-detail {
+  margin-top: 16px;
+}
+.solution-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.solution-name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+.solution-tagline {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+.solution-description {
+  margin: 0 0 24px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+}
+.sub-tabs {
+  margin-bottom: 24px;
+}
+</style>

package/client/src/views/TokenMarketView.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="token-market-page">
+    <el-empty :description="t('common.underConstruction')">
+      <template #image>
+        <el-icon :size="80" color="var(--el-text-color-secondary)">
+          <Tools />
+        </el-icon>
+      </template>
+    </el-empty>
+  </div>
+</template>
+
+<style scoped>
+.token-market-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+</style>

package/client/vite.config.js

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import JSON5 from 'json5'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+    // 支持 .json5 文件导入
+    {
+      name: 'json5-plugin',
+      transform(code, id) {
+        if (id.endsWith('.json5')) {
+          const data = JSON5.parse(code)
+          return {
+            code: `export default ${JSON.stringify(data)}`,
+            map: null,
+          }
+        }
+      },
+    },
+  ],
+  server: {
+    port: 7905,
+    host: "0.0.0.0",
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5905',
+        changeOrigin: true
+      }
+    }
+  },
+})