feat: add milk tea activity page

open-isle-cli/src/components/LevelProgress.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="level-progress">
+    <div class="level-progress-current">Lv.{{ currentLevel }}</div>
+    <ProgressBar :value="value" :max="max" />
+    <div class="level-progress-info">
+      <div class="level-progress-exp">{{ exp }} / {{ nextExp }}</div>
+      <div class="level-progress-target">🎉目标 Lv.{{ currentLevel + 1 }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProgressBar from './ProgressBar.vue'
+import { prevLevelExp } from '../utils/level'
+export default {
+  name: 'LevelProgress',
+  components: { ProgressBar },
+  props: {
+    exp: { type: Number, default: 0 },
+    currentLevel: { type: Number, default: 0 },
+    nextExp: { type: Number, default: 0 }
+  },
+  computed: {
+    max () {
+      return this.nextExp - prevLevelExp(this.currentLevel)
+    },
+    value () {
+      return this.exp - prevLevelExp(this.currentLevel)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.level-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.level-progress-current {
+  font-weight: bold;
+}
+
+.level-progress-info {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.level-progress-exp,
+.level-progress-target {
+  font-size: 12px;
+  opacity: 0.8;
+}
+</style>

open-isle-cli/src/components/ProgressBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="progress-bar">
+    <div class="progress-bar-inner" :style="{ width: `${percent}%` }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 }
+  },
+  computed: {
+    percent () {
+      if (this.max <= 0) return 0
+      const p = (this.value / this.max) * 100
+      return Math.max(0, Math.min(100, p))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 200px;
+  height: 8px;
+  background-color: var(--normal-background-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar-inner {
+  height: 100%;
+  background-color: var(--primary-color);
+}
+</style>