feat

.gitignore

@@ -10,3 +10,4 @@ node_modules
 *.spec
 __pycache__
 .vscode
+*.mjs

.vscode/settings.json

@@ -1,10 +1,12 @@
 {
   "cSpell.words": [
+    "antfu",
     "demi",
     "iconify",
     "intlify",
     "pinia",
     "pnpm",
+    "pyinstaller",
     "pywebview",
     "unocss",
     "unplugin",

README.md

@@ -57,7 +57,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
 
-- 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
+- 🎨 [TailwindCss](https://github.com/) - the instant on-demand atomic CSS engine
 
 - 😃 [Use icons from any icon sets with classes](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
 

app/main.py

@@ -20,7 +20,7 @@ def WebViewApp(port,dev=False):
     cfg = Config()    # 配置文件
     if(dev):
         window = webview.create_window(cfg.appName, 'http://localhost:'+str(port)+'/',js_api=api)
-        webview.start(debug=DEBUG, http_server=True)    # 启动窗口
+        webview.start(debug=True, http_server=True)    # 启动窗口
     else:
         template = os.path.join(MAIN_DIR, "index.html")    # 设置页面，可以指向远程或本地
         window = webview.create_window(title=cfg.appName, url=template, js_api=api)    # 创建窗口
@@ -30,16 +30,16 @@ def WebViewApp(port,dev=False):
 
 if __name__ == "__main__":
     parser = argparse.ArgumentParser()
-    parser.add_argument(
-        '--dev',
-        type=str,
-        default='False',
-        help="开发模式")
     parser.add_argument(
         '--port',
         type=str,
         default='3333',
         help="端口号")
+    parser.add_argument(
+        '--dev',
+        type=str,
+        default='False',
+        help="开发模式")
     args = parser.parse_args()
 
     WebViewApp(args.port,args.dev=='True')

locales/en.yml

@@ -1,3 +1,6 @@
+Settings:
+  Advanced: advanced settings
+  Personalization: personalization
 button:
   about: About
   back: Back
@@ -6,9 +9,9 @@ button:
   toggle_dark: Toggle dark mode
   toggle_langs: Change languages
 intro:
+  aka: Also known as
   desc: Opinionated Vite Starter Template
   dynamic-route: Demo of dynamic route
   hi: Hi, {name}!
-  aka: Also known as
   whats-your-name: What's your name?
 not-found: Not found

locales/zh-CN.yml

@@ -12,3 +12,6 @@ intro:
   aka: 也叫
   whats-your-name: 输入你的名字
 not-found: 未找到页面
+Settings:
+  Advanced: 高级设置
+  Personalization: 个性化设置

package.json

@@ -7,16 +7,16 @@
   "author": "Marlene <1677568218@qq.com>",
   "scripts": {
     "dev": "vite --port 3333 --open ",
-    "dev:app": "python app\\main.py --port 3333 --dev 'True'",
+    "dev:app": "E:/anaconda/envs/pytorch/python.exe app\\main.py --port 3333 --dev True",
     "lint": "eslint .",
     "preview": "vite preview",
     "preview-https": "serve dist",
     "typecheck": "vue-tsc --noEmit",
     "up": "taze major -I",
     "inits": "pnpm install && run-script-os",
-    "inits:windows": "python app\\spec\\getSpec.py && pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r .\\app\\assets\\requirements.txt",
+    "inits:windows": "E:/anaconda/envs/pytorch/python.exe app\\spec\\getSpec.py && pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r .\\app\\assets\\requirements.txt",
     "start": "vite build && run-script-os",
-    "start:windows": "python -X dev .\\app\\main.py",
+    "start:windows": "E:/anaconda/envs/pytorch/python.exe -X dev .\\app\\main.py",
     "pre": "shx rm -rf build && vite build && run-script-os",
     "pre:windows": "pyinstaller --clean .\\app\\spec\\windows-pre.spec",
     "pre:folder": "shx rm -rf build && vite build && pyinstaller --clean .\\app\\spec\\windows-folder-pre.spec",
@@ -25,9 +25,10 @@
     "build:folder": "shx rm -rf build && vite build && pyinstaller --clean .\\app\\spec\\windows-folder.spec"
   },
   "dependencies": {
-    "@unocss/reset": "^0.46.5",
+    "@unocss/reset": "^0.47.5",
     "@vueuse/core": "^9.5.0",
     "@vueuse/head": "^1.0.18",
+    "daisyui": "^2.42.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.25",
     "run-script-os": "^1.1.6",
@@ -43,9 +44,11 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
+    "@unocss/vite": "^0.47.5",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue-macros/volar": "^0.5.4",
     "@vue/test-utils": "^2.2.4",
+    "autoprefixer": "^10.4.13",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
     "eslint": "^8.28.0",
@@ -53,10 +56,12 @@
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.6.1",
     "pnpm": "^7.17.0",
+    "postcss": "^8.4.19",
     "shiki": "^0.11.1",
+    "tailwindcss": "^3.2.4",
     "taze": "^0.8.4",
     "typescript": "^4.9.3",
-    "unocss": "^0.46.5",
+    "unocss": "^0.47.5",
     "unplugin-auto-import": "^0.11.5",
     "unplugin-vue-components": "^0.22.11",
     "unplugin-vue-macros": "^1.0.0",

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -3,9 +3,9 @@
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
 useHead({
-  title: 'Vitesse',
+  title: 'EMC',
   meta: [
-    { name: 'description', content: 'Opinionated Vite Starter Template' },
+    { name: 'description', content: 'Eye/Mouth Control' },
     {
       name: 'theme-color',
       content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),

src/components.d.ts

@@ -8,6 +8,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Counter: typeof import('./components/Counter.vue')['default']
+    DSelect: typeof import('./components/daisy/DSelect.vue')['default']
+    DToggle: typeof import('./components/daisy/DToggle.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']
     Input: typeof import('./components/Input.vue')['default']
     README: typeof import('./components/README.md')['default']

src/components/Footer.vue

@@ -9,15 +9,11 @@ const toggleLocales = () => {
 </script>
 
 <template>
-  <nav text-xl mt-6>
+  <nav class="text-xl mt-6">
     <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
       <div i-carbon-campsite />
     </RouterLink>
 
-    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
-      <div i="carbon-sun dark:carbon-moon" />
-    </button>
-
     <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
       <div i-carbon-language />
     </a>
@@ -26,7 +22,7 @@ const toggleLocales = () => {
       <div i-carbon-dicom-overlay />
     </RouterLink>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/MarleneJiang/EMC" target="_blank" title="GitHub">
       <div i-carbon-logo-github />
     </a>
   </nav>

src/components/daisy/DSelect.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <select class="select select-bordered ">
+    <option selected>
+      嘴控
+    </option>
+    <option>眼控</option>
+    <option>嘴/眼控</option>
+  </select>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/daisy/DToggle.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <label class="flex items-center cursor-pointer justify-center pt-4">
+      <span class="label-text pr-2 text-lg">{{ text }}</span>
+      <input type="checkbox" class="toggle" checked>
+    </label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/composables/dark.ts

@@ -1,4 +1,4 @@
 // these APIs are auto-imported from @vueuse/core
 export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
+// export const toggleDark = useToggle(isDark)
 export const preferredDark = usePreferredDark()

src/layouts/home.vue

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

src/main.ts

@@ -4,10 +4,8 @@ import Previewer from 'virtual:vue-component-preview'
 import App from './App.vue'
 import type { UserModule } from './types'
 import generatedRoutes from '~pages'
-
-import '@unocss/reset/tailwind.css'
-import './styles/main.css'
 import 'uno.css'
+import './styles/main.css'
 
 const routes = setupLayouts(generatedRoutes)
 

src/pages/about.md

@@ -8,7 +8,7 @@ title: About
   <h3>About</h3>
 </div>
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **TailwindCss** for styling and icons.
 
 ```js
 // syntax highlighting example

src/pages/index.vue

@@ -29,44 +29,48 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-campsite inline-block />
+  <div class="flex justify-center">
+    <div class="">
+      <div class="pr-9">
+        <div class="text-5xl ">
+          EMC
+        </div>
+        <div class="text-gray-400">
+          眼控/嘴控小工具
+        </div>
+        <d-toggle text="启用" />
+        <d-toggle text="触发提醒" />
+        <d-select class="mt-5" />
+      </div>
+      <div class="item-center flex flex-col pr-9 mt-5">
+        <div>
+          <router-link to="/AdvancedSettings" class="hover:underline">
+            {{ t('Settings.Advanced') }}
+          </router-link>
+        </div>
+        <div>
+          <router-link to="/Personalization" class="hover:underline mt-3">
+            {{ t('Settings.Personalization') }}
+          </router-link>
+        </div>
+      </div>
     </div>
-    <p>
-      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
-        Vitesse
-      </a>
-    </p>
-    <p>
-      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
-    </p>
 
-    <div py-4 />
-    <div>{{ pythonData }}</div>
-    <div py-4 />
-
-    <Input
-      v-model="name"
-      placeholder="What's your name?"
-      autocomplete="false"
-      :value="pythonName"
-      @keydown.enter="go"
-    />
-    <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
-
-    <div>
-      <button
-        btn m-3 text-sm
-        :disabled="!name"
-        @click="go"
-      >
-        {{ t('button.go') }}
-      </button>
+    <div class="flex justify-center">
+      <figure class="max-w-lg ">
+        <img class="max-w-full h-auto rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+        <figcaption class="mt-2 text-sm text-center text-gray-500 dark:text-gray-400">
+          实时图像
+        </figcaption>
+      </figure>
     </div>
   </div>
 </template>
 
+<style scoped>
+
+</style>
+
 <route lang="yaml">
 meta:
   layout: home

src/styles/main.css

@@ -1,4 +1,8 @@
 @import './markdown.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities; 
+
 
 html,
 body,

tailwind.config.cjs

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: { extend: {} },
+  plugins: [require('daisyui')],
+  daisyui: {
+    styled: true,
+    themes: ['winter', 'night'],
+    base: true,
+    utils: true,
+    logs: true,
+    rtl: false,
+    prefix: '',
+    darkTheme: 'night',
+  },
+}

unocss.config.ts

@@ -11,7 +11,6 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
   ],
   presets: [

vite.config.ts

@@ -12,9 +12,9 @@ import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Inspect from 'vite-plugin-inspect'
 import LinkAttributes from 'markdown-it-link-attributes'
-import Unocss from 'unocss/vite'
 import Shiki from 'markdown-it-shiki'
 import VueMacros from 'unplugin-vue-macros/vite'
+import Unocss from '@unocss/vite'
 
 export default defineConfig({
   resolve: {
@@ -70,10 +70,6 @@ export default defineConfig({
       dts: 'src/components.d.ts',
     }),
 
-    // https://github.com/antfu/unocss
-    // see unocss.config.ts for config
-    Unocss(),
-
     // https://github.com/antfu/vite-plugin-vue-markdown
     // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
     Markdown({
@@ -97,6 +93,10 @@ export default defineConfig({
       },
     }),
 
+    // https://github.com/antfu/unocss
+    // see unocss.config.ts for config
+    Unocss(),
+
     // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
       registerType: 'autoUpdate',