@wwkit/freetoken 1.0.1

package/client/src/components/DetailBlock.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="detail-block">
+    <div v-if="title || $slots.header" class="detail-block-header">
+      <slot name="header">
+        <h3 class="detail-block-title">{{ title }}</h3>
+        <p v-if="description" class="detail-block-desc">{{ description }}</p>
+      </slot>
+    </div>
+    <div class="detail-block-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.detail-block {
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.detail-block-header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--el-border-color);
+  background: var(--el-fill-color-light);
+}
+.detail-block-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.detail-block-desc {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.detail-block-body {
+  padding: 12px 16px;
+}
+</style>

package/client/src/components/HelloWorld.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/vite.svg'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button type="button" class="counter" @click="count++">
+      Count is {{ count }}
+    </button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>

package/client/src/components/LangSwitch.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setLocale } from '../locales/index.js'
+
+const { locale } = useI18n()
+
+const toggleLabel = computed(() => (locale.value === 'zh-CN' ? 'English' : '中文'))
+
+function toggle() {
+  setLocale(locale.value === 'zh-CN' ? 'en' : 'zh-CN')
+}
+</script>
+
+<template>
+  <span class="lang-toggle" @click="toggle">
+    {{ toggleLabel }}
+  </span>
+</template>
+
+<style scoped>
+.lang-toggle {
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+  user-select: none;
+}
+.lang-toggle:hover {
+  color: var(--el-color-primary);
+}
+</style>

package/client/src/components/LinkList.vue

@@ -0,0 +1,32 @@
+<script setup>
+defineProps({
+  links: { type: Array, default: () => [] },
+})
+</script>
+
+<template>
+  <div class="link-list">
+    <el-link
+      v-for="link in links"
+      :key="link.url"
+      :href="link.url"
+      target="_blank"
+      type="primary"
+      :underline="false"
+      class="link-item"
+    >
+      {{ link.labelKey ? $t(link.labelKey) : link.label }}
+    </el-link>
+  </div>
+</template>
+
+<style scoped>
+.link-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.link-item {
+  font-size: 14px;
+}
+</style>

package/client/src/components/OsSwitch.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useOs } from '../composables/useOs'
+
+const { t } = useI18n()
+const { os, setOs } = useOs()
+</script>
+
+<template>
+  <el-dropdown trigger="click" @command="setOs">
+    <span class="os-switch">
+      <el-icon><Monitor /></el-icon>
+      <span class="os-label">{{ t(`os.${os}`) }}</span>
+      <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="unix" :disabled="os === 'unix'">{{ t('os.unix') }}</el-dropdown-item>
+        <el-dropdown-item command="windows" :disabled="os === 'windows'">{{ t('os.windows') }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style scoped>
+.os-switch {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+  user-select: none;
+}
+.os-switch:hover {
+  color: var(--el-color-primary);
+}
+.os-label {
+  margin: 0 2px;
+}
+</style>

package/client/src/components/OsToggle.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  os: { type: String, default: 'unix' },
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <el-tag type="info" effect="plain" size="small">
+    {{ $t('os.currentSystem') }}：{{ t(`os.${props.os}`) }}
+  </el-tag>
+</template>

package/client/src/components/PageHeader.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div class="page-header">
+    <h1 class="page-title">{{ title }}</h1>
+    <p v-if="description" class="page-desc">{{ description }}</p>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  margin-bottom: 24px;
+}
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.page-desc {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+</style>

package/client/src/components/StepList.vue

@@ -0,0 +1,92 @@
+<script setup>
+const props = defineProps({
+  steps: { type: Array, default: () => [] },
+  small: { type: Boolean, default: false },
+  linkable: { type: Boolean, default: false },
+})
+
+const URL_RE = /(https?:\/\/[^\s，。、]+)/g
+
+function parseStep(text) {
+  if (!props.linkable) return [{ type: 'text', value: text }]
+  const parts = []
+  let last = 0
+  let m
+  const re = new RegExp(URL_RE.source, 'g')
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) parts.push({ type: 'text', value: text.slice(last, m.index) })
+    parts.push({ type: 'url', value: m[0] })
+    last = m.index + m[0].length
+  }
+  if (last < text.length) parts.push({ type: 'text', value: text.slice(last) })
+  return parts
+}
+</script>
+
+<template>
+  <ol class="step-list" :class="{ 'step-list--small': small }">
+    <li v-for="(step, i) in steps" :key="i" class="step-item">
+      <span class="step-num">{{ i + 1 }}</span>
+      <span class="step-text">
+        <template v-for="(seg, si) in parseStep(step)" :key="si">
+          <a v-if="seg.type === 'url'" :href="seg.value" target="_blank" rel="noopener noreferrer" class="step-link">{{ seg.value }}</a>
+          <template v-else>{{ seg.value }}</template>
+        </template>
+      </span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.step-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 0;
+}
+.step-num {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.step-text {
+  line-height: 1.6;
+  color: var(--el-text-color-primary);
+  padding-top: 2px;
+  font-size: 14px;
+}
+.step-link {
+  color: var(--el-color-primary);
+  text-decoration: none;
+}
+.step-link:hover {
+  text-decoration: underline;
+}
+
+.step-list--small .step-item {
+  padding: 5px 0;
+}
+.step-list--small .step-num {
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+}
+.step-list--small .step-text {
+  font-size: 13px;
+  line-height: 1.5;
+  padding-top: 1px;
+}
+</style>

package/client/src/composables/useClipboard.js

@@ -0,0 +1,26 @@
+import { ElMessage } from 'element-plus'
+import i18n from '../locales/index.js'
+
+export function useClipboard() {
+  async function copy(text) {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text)
+      } else {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textarea)
+      }
+      ElMessage.success(i18n.global.t('common.copiedToClipboard'))
+    } catch {
+      ElMessage.error(i18n.global.t('common.copyFailed'))
+    }
+  }
+
+  return { copy }
+}

package/client/src/composables/useOs.js

@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+
+const STORAGE_KEY = 'os'
+
+function getInitialOs() {
+  const saved = localStorage.getItem(STORAGE_KEY)
+  if (saved === 'unix' || saved === 'windows') {
+    return saved
+  }
+  return /Win/i.test(navigator.userAgent) ? 'windows' : 'unix'
+}
+
+const os = ref(getInitialOs())
+
+export function useOs() {
+  function setOs(value) {
+    os.value = value
+    localStorage.setItem(STORAGE_KEY, value)
+  }
+
+  return { os, setOs }
+}