From 5abdde732437fbffce8f7898b5766ee44734bc58 Mon Sep 17 00:00:00 2001
From: lhf6623 <1336955219@qq.com>
Date: Sun, 30 Jul 2023 13:24:26 +0800
Subject: [PATCH] add: unocss

---
 .gitignore                    |  1 +
 README.md                     |  2 +-
 package.json                  |  2 ++
 src/App.vue                   | 18 +++++++-------
 src/assets/main.css           | 44 -----------------------------------
 src/components/RandomTree.vue | 14 ++---------
 src/main.js                   |  2 ++
 uno.config.js                 | 19 +++++++++++++++
 vite.config.js                |  3 ++-
 9 files changed, 38 insertions(+), 67 deletions(-)
 create mode 100644 uno.config.js

diff --git a/.gitignore b/.gitignore
index 66240cd..4ec50d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 package-lock.json
+pnpm-lock.yaml
 
 node_modules
 .DS_Store
diff --git a/README.md b/README.md
index 2cb2a80..e81e597 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Vue.js 是基于 JavaScript 构建用户界面的库。该模板使用 Vite 来
 
 ## 自定义配置
 
-请参阅 [[Vite配置参考](https://vitejs.dev/config/).
+请参阅 [[Vite配置参考]](https://vitejs.dev/config/).
 
 ## 项目设置
 
diff --git a/package.json b/package.json
index 2536838..1c0148b 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,13 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@unocss/reset": "^0.54.0",
     "guess": "^1.0.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "unocss": "^0.54.0",
     "vite": "^4.3.9"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 7488979..dc15928 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -76,20 +76,20 @@ async function playChess(item, row, col) {
 </script>
 
 <template>
-  <div class="content flex-start">
-    <p class="flex-between mr-6px">
-      <label for="size" class="space-nowrap">棋盘大小：</label>
+  <div p-6px box-border flex justify-start>
+    <p mr-6px flex justify-between>
+      <label for="size" whitespace-nowrap>棋盘大小：</label>
       <input v-model="size" id="size" type="number">
     </p>
-    <p class="flex-between mr-6px">
-      <label for="win_size" class="space-nowrap">胜利棋数：</label>
+    <p mr-6px flex justify-between>
+      <label for="win_size" whitespace-nowrap>胜利棋数：</label>
       <input v-model="win_size" id="win_size" type="number" min="3" max="8">
     </p>
-    <button @click="confirm" class="space-nowrap mr-6px px-6px">重新开始</button>
-    <button @click="back" class="space-nowrap px-6px">返回上一步</button>
+    <button @click="confirm" whitespace-nowrap mr-6px px-6px>重新开始</button>
+    <button @click="back" whitespace-nowrap px-6px>返回上一步</button>
   </div>
-  <div class="content border-top content-lattice">
-    <p class="row" v-for="(lattice, r_i) in lattices" :key="r_i">
+  <div p-6px box-border flex flex-col items-center border="t t-solid #999">
+    <p flex flex-row v-for="(lattice, r_i) in lattices" :key="r_i">
     <p class="col" :class="records_obj[`${r_i}_${c_i}`]" v-for="(item, c_i) in lattice" :key="`${r_i}-${c_i}`"
       @click="playChess(item, r_i, c_i)">
     </p>
diff --git a/src/assets/main.css b/src/assets/main.css
index 3db7481..e475abe 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -16,50 +16,10 @@ body,
   font-weight: normal;
 }
 
-.content {
-  padding: 6px;
-  box-sizing: border-box;
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-start {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-.mr-6px {
-  margin-right: 6px;
-}
-.px-6px{
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
 input {
   width: 60px;
 }
 
-.border-top {
-  border-top: 1px solid #999;
-}
-
-.content-lattice {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
 .col {
   width: 20px;
   height: 20px;
@@ -122,8 +82,4 @@ input {
 .isWin::after {
   background-color: red;
   border-color: var(--p-win-border-color);
-}
-
-.space-nowrap {
-  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src/components/RandomTree.vue b/src/components/RandomTree.vue
index a6ecd0a..a774fa3 100644
--- a/src/components/RandomTree.vue
+++ b/src/components/RandomTree.vue
@@ -1,5 +1,6 @@
 <template>
-    <canvas class="canvas" width="400" height="300" ref="canvas"></canvas>
+    <canvas absolute right-10px bottom-10px pointer-events-none opacity-40 class="canvas" width="400" height="300"
+        ref="canvas"></canvas>
 </template>
 
 <script setup>
@@ -69,14 +70,3 @@ function drawBranch(ctx, v0, thick, len, dir) {
     drawBranch(ctx, v1, thick * 0.8, len * 0.8, dir - Math.random() * 46);
 }
 </script>
-
-<style>
-.canvas {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    pointer-events: none;
-    opacity: 0.4;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 90e6400..545fd95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import '@unocss/reset/normalize.css'
+import 'virtual:uno.css'
 
 import './assets/main.css'
 
diff --git a/uno.config.js b/uno.config.js
new file mode 100644
index 0000000..2371146
--- /dev/null
+++ b/uno.config.js
@@ -0,0 +1,19 @@
+// uno.config.js
+import {
+  defineConfig, presetAttributify, presetIcons,
+  presetTypography, presetUno,
+  transformerDirectives, transformerVariantGroup
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 917e95a..5b73c98 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), UnoCSS(),],
   server: {
     host: true
   },
-- 
GitLab