Merge pull request #10 from kongying-tavern/refactor/new-ui

Refactor to new UI

Author: boxsnake

.eslintrc.cjs

@@ -4,12 +4,25 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-essential",
     "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier",
   ],
   parserOptions: {
     ecmaVersion: "latest",
   },
+  rules: {
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          void: "always",
+          normal: "never",
+          component: "always",
+        },
+      },
+    ],
+  },
 };

.github/workflows/semantic-release.yml

@@ -20,7 +20,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: latest
-          cache: pnpm
       - name: Install deps
         run: rm -rf node_modules && pnpm install
       - name: Build

.gitignore

@@ -45,6 +45,7 @@ jspm_packages/
 # Dependency locks
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
 
 # TypeScript v1 declaration files
 typings/

.stylelintrc.cjs

@@ -4,4 +4,18 @@ module.exports = {
     'stylelint-config-sass-guidelines',
     'stylelint-prettier/recommended',
   ],
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['export', 'deep']
+      }
+    ],
+    'property-no-unknown': [
+      true,
+      {
+        ignoreSelectors: [':export']
+      }
+    ]
+  }
 };

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "element-plus": "^2.2.32",
+    "lodash": "^4.17.21",
     "pinia": "^2.0.28",
     "tailwindcss": "^3.2.7",
     "vue": "^3.2.45",
@@ -25,7 +26,9 @@
   "devDependencies": {
     "@aghap/semantic-release-gh-pages": "^2.0.9",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@types/lodash": "^4.14.194",
     "@types/node": "^18.11.12",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -40,7 +43,7 @@
     "prettier": "^2.7.1",
     "sass": "^1.58.3",
     "semantic-release": "^20.1.3",
-    "stylelint": "^14.0.0",
+    "stylelint": "^15.0.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-config-standard-scss": "^5.0.0",

pnpm-lock.yaml

@@ -1,7 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <RouterView />
 </template>
-
-<style scoped></style>

src/App.vue

@@ -0,0 +1,34 @@
+@use 'sass:math';
+@use '@/assets/vars/color.scss' as *;
+
+$scrollbar-width: 0.4rem;
+$scrollbar-radius: math.div($scrollbar-width, 2);
+$scrollbar-color-track: $color-gray-4;
+$scrollbar-color-thumb: $color-gray-3;
+
+@mixin scrollbar {
+  .scrollbar,
+  .scrollbar :deep(*) {
+    &::-webkit-scrollbar {
+      border-radius: $scrollbar-radius;
+      background-color: $scrollbar-color-track;
+    }
+
+    &::-webkit-scrollbar:horizontal {
+      height: $scrollbar-width;
+    }
+
+    &::-webkit-scrollbar:vertical {
+      width: $scrollbar-width;
+    }
+
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: $scrollbar-radius;
+      background-color: $scrollbar-color-thumb;
+    }
+  }
+}

src/assets/effects/scrollbar.scss

@@ -0,0 +1,5 @@
+@mixin box-shadow {
+  .box-shadow {
+    box-shadow: 0.3rem 0.3rem 0.36rem 0.04rem rgb(0 0 0 / 10%);
+  }
+}