feat: personality

.vscode/settings.json

@@ -4,6 +4,7 @@
     "demi",
     "iconify",
     "intlify",
+    "mingcute",
     "pinia",
     "pnpm",
     "pyinstaller",

locales/en.yml

@@ -1,3 +1,7 @@
+Personalization:
+  Annotations: label
+  Collect: collection
+  Train: train
 Settings:
   Advanced: Advanced Settings
   Personalization: Personalization

locales/zh-CN.yml

@@ -15,3 +15,7 @@ not-found: 未找到页面
 Settings:
   Advanced: 高级设置
   Personalization: 个性化设置
+Personalization:
+  Collect: 采集
+  Annotations: 标注
+  Train: 训练

package.json

@@ -41,9 +41,11 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.31.0",
     "@iconify-json/carbon": "^1.1.11",
+    "@iconify/json": "^2.1.147",
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
+    "@unocss/preset-icons": "^0.47.5",
     "@unocss/vite": "^0.47.5",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue-macros/volar": "^0.5.4",

pnpm-lock.yaml

@@ -3,9 +3,11 @@ lockfileVersion: 5.3
 specifiers:
   '@antfu/eslint-config': ^0.31.0
   '@iconify-json/carbon': ^1.1.11
+  '@iconify/json': ^2.1.147
   '@intlify/vite-plugin-vue-i18n': ^6.0.3
   '@types/markdown-it-link-attributes': ^3.0.1
   '@types/nprogress': ^0.2.0
+  '@unocss/preset-icons': ^0.47.5
   '@unocss/reset': ^0.47.5
   '@unocss/vite': ^0.47.5
   '@vitejs/plugin-vue': ^3.2.0
@@ -67,9 +69,11 @@ dependencies:
 devDependencies:
   '@antfu/eslint-config': 0.31.0_eslint@8.28.0+typescript@4.9.3
   '@iconify-json/carbon': 1.1.11
+  '@iconify/json': 2.1.147
   '@intlify/vite-plugin-vue-i18n': 6.0.3_vite@3.2.4+vue-i18n@9.2.2
   '@types/markdown-it-link-attributes': 3.0.1
   '@types/nprogress': 0.2.0
+  '@unocss/preset-icons': 0.47.5
   '@unocss/vite': 0.47.5_vite@3.2.4
   '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
   '@vue-macros/volar': 0.5.4_vue-tsc@1.0.9+vue@3.2.45
@@ -1449,6 +1453,13 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify/json/2.1.147:
+    resolution: {integrity: sha512-3aXxKtbbu+i/L6PKHlnzf37nMg3UXhds54l7QmVx4XAWcDIHt/eTECiz5KPXfYCySSpi4wy+JKSU/mObhZJPvw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 0.3.9
+    dev: true
+
   /@iconify/types/2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
@@ -6383,6 +6394,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /pathe/0.3.9:
+    resolution: {integrity: sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==}
+    dev: true
+
   /pathe/1.0.0:
     resolution: {integrity: sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==}
     dev: true

src/components/daisy/DSelect.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <select class="select select-bordered ">
+  <select class="select select-bordered select-primary">
     <option selected>
       嘴控
     </option>

src/components/daisy/DToggle.vue

@@ -16,7 +16,7 @@ defineProps({
   <div>
     <label class="flex items-center cursor-pointer justify-center ">
       <span class="label-text pr-2 text-lg">{{ text }}</span>
-      <input type="checkbox" class="toggle" checked :disabled="$props.disabled">
+      <input type="checkbox" class="toggle toggle-primary" checked :disabled="$props.disabled">
     </label>
   </div>
 </template>

src/layouts/404.vue

@@ -5,13 +5,13 @@ router.currentRoute.value.path === '/index.html' && router.push('/') // redirect
 </script>
 
 <template>
-  <main p="x4 y10" text="center teal-700 dark:gray-200">
+  <main p="x4 y10" text="center  dark:gray-200">
     <div text-4xl>
       <div i-carbon-warning inline-block />
     </div>
     <RouterView />
     <div>
-      <button class="btn" text-sm m="3 t8" @click="router.back">
+      <button class="btn btn-primary btn-sm" text-sm m="3 t8" @click="router.back">
         {{ t('button.back') }}
       </button>
     </div>

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main class="px-4  text-center text-gray-700 dark:text-gray-200">
     <RouterView />
     <Footer />
     <!-- <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">

src/modules/i18n.ts

@@ -17,7 +17,7 @@ const messages = Object.fromEntries(
 export const install: UserModule = ({ app }) => {
   const i18n = createI18n({
     legacy: false,
-    locale: 'en',
+    locale: 'zh-CN',
     messages,
   })
 

src/pages/AdvancedSettings.vue

@@ -76,7 +76,7 @@ const otherSetting = [
 <template>
   <div>
     <div class="hero">
-      <div class="hero-content flex-col items-end lg:flex-row-reverse ">
+      <div class="hero-content flex-col items-end">
         <div class="text-3xl flex items-center">
           <router-link to="/">
             <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />

src/pages/Personalization/annotations.vue

@@ -0,0 +1,206 @@
+<script setup>
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    <div class="hero justify-start">
+      <div class="hero-content flex-col items-end">
+        <div class=" flex">
+          <!-- <router-link to="/" class="text-3xl">
+            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
+          </router-link> -->
+          <div>
+            <ul class="steps">
+              <li class="step step-primary">
+                {{ t('Personalization.Collect') }}
+              </li>
+              <li class="step step-primary">
+                {{ t('Personalization.Annotations') }}
+              </li>
+              <li class="step">
+                {{ t('Personalization.Train') }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- <div class="text-gray-500">
+          修改后重启生效
+        </div> -->
+      </div>
+    </div>
+
+    <div class="flex justify-center flex-col items-center">
+      <div text-3xl class="label-title">
+        图像标注
+      </div>
+      <div flex items-center mt-4>
+        <div class="label-left mr-4">
+          <div>
+            <ul class="menu bg-base-100 p-1 py-2 rounded-box shadow">
+              <li class="menu-title">
+                <span>标注类别-眼睛</span>
+              </li>
+              <li>
+                <a class="active"><div i-mingcute-eye-line />眼睛开</a>
+              </li>
+              <li><a><div i-mingcute-eye-close-fill />眼睛闭</a></li>
+              <li class="menu-title">
+                <span>标注类别-嘴巴</span>
+              </li>
+              <li><a><div i-icon-park-outline-surprised-face-with-open-big-mouth />嘴巴开</a></li>
+              <li><a><div i-icon-park-outline-face-without-mouth />嘴巴闭</a></li>
+            </ul>
+          </div>
+          <div />
+          <div class="stats stats-vertical shadow mt-4">
+            <div class="stat">
+              <div class="stat-title flex items-center">
+                <div i-ri-quill-pen-fill />已标记
+              </div>
+              <div class="stat-value">
+                200
+              </div>
+            </div>
+
+            <div class="stat">
+              <div class="stat-title flex items-center">
+                <div i-ep-warn-triangle-filled />未标记
+              </div>
+              <div class="stat-value">
+                18
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="label-center flex ">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+        </div>
+        <div class="label-right ml-4 shadow">
+          <div class="label-imgs h-96 carousel carousel-vertical rounded-md">
+            <div class="carousel-item h-2/5 indicator hover:cursor-pointer">
+              <span class="indicator-item badge badge-primary indicator-start indicator-bottom "><div i-carbon:checkmark-filled />已标注</span>
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+            <div class="carousel-item h-2/5 mt-1">
+              <img src="/Snipaste_2022-12-01_22-59-42.png">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full flex justify-around mt-4">
+      <div class="flex-col items-end">
+        <div class=" flex">
+          <router-link to="/Personalization">
+            <button class="btn btn-primary ">
+              <div i-carbon-arrow-left />采集
+            </button>
+          </router-link>
+        </div>
+      </div>
+      <div class="flex-col items-end">
+        <div class="btn-group">
+          <button class="btn hover:btn-primary">
+            <router-link to="/Personalization/train" class="flex items-center">
+              <div i-mingcute-cloud-line />云端训练
+            </router-link>
+          </button>
+          <button class="btn hover:btn-primary">
+            <router-link to="/Personalization/train" class="flex items-center">
+              <div i-mingcute-computer-line />本地训练
+            </router-link>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style  scoped>
+.indicator {
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+}
+.indicator :where(.indicator-item) {
+  z-index: 1;
+  position: absolute;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item) {
+  right: 0px;
+  left: auto;
+  top: 0px;
+  bottom: auto;
+  --tw-translate-x: 50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-start) {
+  right: auto;
+  left: 0px;
+  --tw-translate-x: 0%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-center) {
+  right: 50%;
+  left: 50%;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-end) {
+  right: 0px;
+  left: auto;
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-bottom) {
+  top: auto;
+  bottom: 0px;
+  --tw-translate-y: -15%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-middle) {
+  top: 50%;
+  bottom: 50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.indicator :where(.indicator-item.indicator-top) {
+  top: 0px;
+  bottom: auto;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.stat {
+    display: inline-grid;
+    width: 100%;
+    grid-template-columns: repeat(1, 1fr);
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+    border-color: hsl(var(--bc) / var(--tw-border-opacity));
+    --tw-border-opacity: 0.1;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+}
+</style>

src/pages/Personalization/index.vue

@@ -0,0 +1,201 @@
+<script setup>
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    <div class="hero justify-start">
+      <div class="hero-content flex-col items-end">
+        <div class=" flex">
+          <router-link to="/" class="text-3xl">
+            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
+          </router-link>
+          <div>
+            <ul class="steps">
+              <li class="step step-primary">
+                {{ t('Personalization.Collect') }}
+              </li>
+              <li class="step">
+                {{ t('Personalization.Annotations') }}
+              </li>
+              <li class="step">
+                {{ t('Personalization.Train') }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- <div class="text-gray-500">
+          修改后重启生效
+        </div> -->
+      </div>
+    </div>
+
+    <div class="flex justify-center flex-col items-center">
+      <div class="collect-title flex items-end">
+        <div text-3xl>
+          实时图像
+        </div>
+        <div flex items-center ml-3>
+          <div class="badge badge-primary">
+            已采集999张图片
+          </div>
+          <div>
+            <select class="select select-sm  max-w-xs">
+              <option selected>
+                不裁剪
+              </option>
+              <option>
+                居中裁剪成224*224
+              </option>
+              <option>
+                居中裁剪成320*320
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="collect-imgs stack mt-4">
+        <div class="collect-img">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+        </div>
+        <div class="collect-img">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+        </div>
+        <div class="collect-img">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+        </div>
+      </div>
+      <div flex mt-10>
+        <button class="btn btn-primary">
+          截图
+        </button>
+        <button class="btn btn-primary ml-10">
+          打开文件夹
+        </button>
+      </div>
+    </div>
+
+    <div class="hero justify-end">
+      <div class="hero-content flex-col items-end">
+        <div class=" flex">
+          <router-link to="/Personalization/annotations">
+            <button class="btn btn-primary ">
+              标注<div i-carbon-arrow-right />
+            </button>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style  scoped>
+.hero {
+  display: grid;
+  width: 100%;
+  place-items: center;
+  background-size: cover;
+  background-position: center;
+}
+.hero > * {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+.hero-content {
+  z-index: 0;
+  display: flex;
+  align-items: left;
+  justify-content: center;
+  max-width: 80rem/* 1280px */;
+  gap: 1rem/* 16px */;
+  padding: 1rem/* 16px */;
+}
+
+.input-group > *,
+  .input-group > .input,
+  .input-group > .select {
+  border-radius: 0px;
+}
+.select {
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+  height: 3rem/* 48px */;
+  padding-left: 1rem/* 16px */;
+  padding-right: 2.5rem/* 40px */;
+  padding-right: 2.5rem/* 40px */;
+  font-size: 0.875rem/* 14px */;
+  line-height: 1.25rem/* 20px */;
+  line-height: 2;
+  min-height: 3rem/* 48px */;
+  border-width: 1px;
+  border-color: hsl(var(--bc) / var(--tw-border-opacity));
+  --tw-border-opacity: 0;
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
+  font-weight: 600;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--rounded-btn, 0.5rem);
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+.select[multiple] {
+  height: auto;
+}
+.select:focus {
+  outline: 0px solid hsla(var(--bc) / 0.2);
+  outline-offset: 2px;
+}
+.select-disabled,
+  .select[disabled] {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
+  --tw-text-opacity: 0.2;
+}
+.select-disabled::placeholder,
+  .select[disabled]::placeholder {
+  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
+  --tw-placeholder-opacity: 0.2;
+}
+.select-multiple,
+  .select[multiple],
+  .select[size].select:not([size="1"]) {
+  background-image: none;
+  padding-right: 1rem/* 16px */;
+}
+.select-multiple,
+  .select[multiple],
+  .select[size].select:not([size="1"]) {
+  background-image: none;
+  padding-right: 1rem/* 16px */;
+}
+.select-multiple,
+  .select[multiple],
+  .select[size].select:not([size="1"]) {
+  background-image: none;
+  padding-right: 1rem/* 16px */;
+}
+
+.select-sm {
+  height: 2rem/* 32px */;
+  padding-left: 0.75rem/* 12px */;
+  padding-right: 2rem/* 32px */;
+  font-size: 0.875rem/* 14px */;
+  line-height: 2rem/* 32px */;
+  min-height: 2rem/* 32px */;
+}
+[dir="rtl"] .select-sm {
+  padding-right: 0.75rem/* 12px */;
+  padding-left: 2rem/* 32px */;
+}
+</style>

src/pages/Personalization/train.vue

@@ -0,0 +1,154 @@
+<script setup>
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    <div class="hero justify-start">
+      <div class="hero-content flex-col items-end">
+        <div class=" flex">
+          <!-- <router-link to="/" class="text-3xl">
+            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
+          </router-link> -->
+          <div>
+            <ul class="steps">
+              <li class="step step-primary">
+                {{ t('Personalization.Collect') }}
+              </li>
+              <li class="step step-primary">
+                {{ t('Personalization.Annotations') }}
+              </li>
+              <li class="step step-primary">
+                {{ t('Personalization.Train') }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- <div class="text-gray-500">
+          修改后重启生效
+        </div> -->
+      </div>
+    </div>
+
+    <div class="flex justify-center flex-col items-center">
+      <div text-3xl class="label-title">
+        图像标注(云端)
+      </div>
+      <div mt-4>
+        <div flex items-center>
+          <div ml-1 text-lg>
+            进度：
+          </div>
+          <progress class="progress ml-3" />
+        </div>
+        <div flex flex-col items-start mt-1>
+          <div class="ml-1 text-lg">
+            输出日志：
+          </div>
+          <div class="mockup-code flex flex-col items-start mt-2">
+            <pre data-prefix="$"><code>loading annotations into memory...</code></pre>
+            <pre data-prefix=">" class="text-warning"><code>[11/30 10:54:19] INFO: Epoch: [110] [ 0/40] loss: 1.585057 </code></pre>
+            <pre data-prefix=">" class="text-success"><code>[11/30 10:56:32] INFO: Epoch: [110] [ 1/40] loss: 1.580321</code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full flex justify-around mt-4">
+      <div class="flex-col items-end">
+        <div class=" flex">
+          <router-link to="/Personalization/annotations">
+            <button class="btn btn-primary ">
+              <div i-carbon-arrow-left />标注
+            </button>
+          </router-link>
+        </div>
+      </div>
+      <div class="flex-col items-end">
+        <div class="">
+          <button class="btn hover:btn-primary">
+            <router-link to="/Personalization/deploy" class="flex items-center">
+              <div i-material-symbols-cloud-download-outline />本地部署
+            </router-link>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style  scoped>
+.mockup-code {
+  position: relative;
+  overflow: hidden;
+  overflow-x: auto;
+  min-width: 30rem/* 288px */;
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+  padding-top: 1.25rem/* 20px */;
+  padding-bottom: 1.25rem/* 20px */;
+  --tw-text-opacity: 1;
+  color: hsl(var(--nc) / var(--tw-text-opacity));
+  border-radius: var(--rounded-box, 1rem);
+}
+.mockup-code pre[data-prefix]:before {
+  content: attr(data-prefix);
+  content: attr(data-prefix);
+  display: inline-block;
+  text-align: right;
+  width: 2rem/* 32px */;
+  opacity: 0.5;
+}
+.mockup-code:before {
+  content: "";
+  margin-bottom: 1rem/* 16px */;
+  display: block;
+  height: 0.75rem/* 12px */;
+  width: 0.75rem/* 12px */;
+  border-radius: 9999px;
+  opacity: 0.3;
+  box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+}
+.mockup-code pre {
+  padding-right: 1.25rem/* 20px */;
+}
+.mockup-code pre:before {
+  content: "";
+  margin-right: 2ch;
+}
+
+.progress {
+  position: relative;
+  width: 24.5rem;
+  appearance: none;
+  overflow: hidden;
+  height: 0.5rem/* 8px */;
+  border-radius: var(--rounded-box, 1rem);
+}
+.progress::-moz-progress-bar {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+}
+.progress:indeterminate::after {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+  content: "";
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: -40%;
+  width: 33.333333%;
+  border-radius: var(--rounded-box, 1rem);
+  animation: progress-loading 5s infinite ease-in-out;
+}
+.progress::-webkit-progress-bar {
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.2;
+  border-radius: var(--rounded-box, 1rem);
+}
+.progress::-webkit-progress-value {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
+  border-radius: var(--rounded-box, 1rem);
+}
+</style>

src/pages/hi/[name].vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{ name: string }>()
-const router = useRouter()
-const user = useUserStore()
-const { t } = useI18n()
-
-watchEffect(() => {
-  user.setNewName(props.name)
-})
-</script>
-
-<template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-pedestrian inline-block />
-    </div>
-    <p>
-      {{ t('intro.hi', { name: props.name }) }}
-    </p>
-
-    <p text-sm opacity-75>
-      <em>{{ t('intro.dynamic-route') }}</em>
-    </p>
-
-    <template v-if="user.otherNames.length">
-      <p text-sm mt-4>
-        <span opacity-75>{{ t('intro.aka') }}:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </router-link>
-          </li>
-        </ul>
-      </p>
-    </template>
-
-    <div>
-      <button
-        btn m="3 t6" text-sm
-        @click="router.back()"
-      >
-        {{ t('button.back') }}
-      </button>
-    </div>
-  </div>
-</template>

src/pages/index.vue

@@ -32,7 +32,7 @@ const { t } = useI18n()
   <div class="flex justify-center ">
     <div class="">
       <div class="pr-9">
-        <div class="text-5xl bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-sky-800 font-extrabold">
+        <div class="text-5xl bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-sky-400 font-extrabold">
           EMC
         </div>
         <div class="text-gray-400">
@@ -40,8 +40,8 @@ const { t } = useI18n()
         </div>
         <div class="bg-gray-100 p-3 rounded-md mt-4">
           <div>实时情况:</div>
-          <d-toggle text="闭眼" class="pt-2" :disabled="true" />
-          <d-toggle text="张嘴" class="pt-2" :disabled="true" />
+          <d-toggle text="眼开" class="pt-2" :disabled="true" />
+          <d-toggle text="嘴张" class="pt-2" :disabled="true" />
         </div>
         <d-toggle text="启用" class="pt-4" />
         <d-toggle text="触发提醒" class="pt-4" />
@@ -49,12 +49,12 @@ const { t } = useI18n()
       </div>
       <div class="item-center flex flex-col pr-9 mt-5">
         <div>
-          <router-link to="/AdvancedSettings" class="hover:underline">
+          <router-link to="/AdvancedSettings" class="hover:underline hover:link-primary">
             {{ t('Settings.Advanced') }}
           </router-link>
         </div>
         <div>
-          <router-link to="/Personalization" class="hover:underline mt-3">
+          <router-link to="/Personalization" class="hover:underline mt-3 hover:link-primary">
             {{ t('Settings.Personalization') }}
           </router-link>
         </div>

unocss.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
     presetIcons({
       scale: 1.2,
       warn: true,
+      cdn: 'https://esm.sh/',
     }),
     presetTypography(),
     presetWebFonts({