conf: add git hooks for formatting

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run fmt

.vscode/swanlab.code-snippets

@@ -19,10 +19,7 @@
     "prefix": "comm",
     "scope": "python",
     "description": "python文件块注释",
-    "body": [
-      "# ---------------------------------- $1 ----------------------------------",
-      "$2"
-    ]
+    "body": ["# ---------------------------------- $1 ----------------------------------", "$2"]
   },
   "frontend-comment": {
     "prefix": ["comment", "comm"],
@@ -35,105 +32,105 @@
     "prefix": "vue",
     "description": "vue文件模板",
     "body": [
-        "<template> </template>",
-        "",
-        "<script setup>"
-        "/**",
-        " * @description: $1",
-        " * @file: ${TM_FILENAME} ",
-        " * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
-        "**/"
-        "$2"
-        "</script>",
-        "",
-        "<style lang=\"scss\" scoped></style>",
-        ""
-      ],
-},
-"vue-chart": {
-	"prefix": "vue-chart",
-	"body": [
-		"<template>",
-		"  <!-- 图表标题 -->",
-		"  <p class=\"text-center font-semibold\">{{ title }}</p>",
-		"  <!-- 如果图表数据错误 -->",
-		"  <div class=\"flex flex-col justify-center grow text-dimmer gap-2\" v-if=\"error\">",
-		"    <SLIcon class=\"mx-auto h-5 w-5\" icon=\"error\" />",
-		"    <p class=\"text-center text-xs\">",
-		"      <!-- 在此处显示错误信息 -->",
-		"    </p>",
-		"  </div>",
-		"  <!-- 如果图表数据正确 -->",
-		"  <template v-else>",
-		"    <!-- 在此处完成图表主体定义 -->",
-		"    <!-- 放大效果弹窗 -->",
-		"    <SLModal class=\"p-10 pt-0 overflow-hidden\" max-w=\"-1\" v-model=\"isZoom\"> </SLModal>",
-		"  </template>",
-		"</template>",
-		"",
-		"<script setup>",
-        "/**",
-        " * @description: $1",
-        " * @file: ${TM_FILENAME} ",
-        " * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
-        "**/",
-		"import SLModal from '@swanlab-vue/components/SLModal.vue'",
-		"import SLIcon from '@swanlab-vue/components/SLIcon.vue'",
-		"import { ref } from 'vue'",
-		"import { useExperimentStroe } from '@swanlab-vue/store'",
-		"import { addTaskToBrowserMainThread } from '@swanlab-vue/utils/browser'",
-		"import * as UTILS from './utils'",
-		"",
-		"// ---------------------------------- 配置 ----------------------------------",
-		"const experimentStore = useExperimentStroe()",
-		"const props = defineProps({",
-		"  title: {",
-		"    type: String,",
-		"    required: true",
-		"  },",
-		"  chart: {",
-		"    type: Object,",
-		"    required: true",
-		"  }",
-		"})",
-		"",
-		"// ---------------------------------- 错误处理，如果chart.error存在，则下面的api都将不应该被执行 ----------------------------------",
-		"",
-		"const error = ref(props.chart.error)",
-		"",
-		"// ---------------------------------- 组件渲染逻辑 ----------------------------------",
-		"",
-		"// ---------------------------------- 数据格式化 ----------------------------------",
-		"",
-		"// ---------------------------------- 渲染、重渲染功能 ----------------------------------",
-		"",
-		"// 渲染",
-		"const render = (data) => {}",
-		"// 重渲染",
-		"const change = (data) => {}",
-		"",
-		"// ---------------------------------- 放大功能 ----------------------------------",
-		"// 是否放大",
-		"const isZoom = ref(false)",
-		"// 放大数据",
-		"const zoom = (data) => {",
-		"  isZoom.value = true",
-		"  // 放大后图表的高度",
-		"  const height = window.innerHeight * 0.6",
-		"  addTaskToBrowserMainThread(() => {})",
-		"}",
-		"",
-		"// ---------------------------------- 暴露api ----------------------------------",
-		"defineExpose({",
-		"  render,",
-		"  change,",
-		"  zoom",
-		"})",
-		"</script>",
-		"",
-		"<style lang=\"scss\" scoped></style>",
-		""
-	],
-	"description": "vue-chart"
-}
+      "<template> </template>",
+      "",
+      "<script setup>",
+      "/**",
+      " * @description: $1",
+      " * @file: ${TM_FILENAME} ",
+      " * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
+      "**/",
+      "$2",
+      "</script>",
+      "",
+      "<style lang=\"scss\" scoped></style>",
+      ""
+    ]
+  },
+  "vue-chart": {
+    "prefix": "vue-chart",
+    "body": [
+      "<template>",
+      "  <!-- 图表标题 -->",
+      "  <p class=\"text-center font-semibold\">{{ title }}</p>",
+      "  <!-- 如果图表数据错误 -->",
+      "  <div class=\"flex flex-col justify-center grow text-dimmer gap-2\" v-if=\"error\">",
+      "    <SLIcon class=\"mx-auto h-5 w-5\" icon=\"error\" />",
+      "    <p class=\"text-center text-xs\">",
+      "      <!-- 在此处显示错误信息 -->",
+      "    </p>",
+      "  </div>",
+      "  <!-- 如果图表数据正确 -->",
+      "  <template v-else>",
+      "    <!-- 在此处完成图表主体定义 -->",
+      "    <!-- 放大效果弹窗 -->",
+      "    <SLModal class=\"p-10 pt-0 overflow-hidden\" max-w=\"-1\" v-model=\"isZoom\"> </SLModal>",
+      "  </template>",
+      "</template>",
+      "",
+      "<script setup>",
+      "/**",
+      " * @description: $1",
+      " * @file: ${TM_FILENAME} ",
+      " * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
+      "**/",
+      "import SLModal from '@swanlab-vue/components/SLModal.vue'",
+      "import SLIcon from '@swanlab-vue/components/SLIcon.vue'",
+      "import { ref } from 'vue'",
+      "import { useExperimentStroe } from '@swanlab-vue/store'",
+      "import { addTaskToBrowserMainThread } from '@swanlab-vue/utils/browser'",
+      "import * as UTILS from './utils'",
+      "",
+      "// ---------------------------------- 配置 ----------------------------------",
+      "const experimentStore = useExperimentStroe()",
+      "const props = defineProps({",
+      "  title: {",
+      "    type: String,",
+      "    required: true",
+      "  },",
+      "  chart: {",
+      "    type: Object,",
+      "    required: true",
+      "  }",
+      "})",
+      "",
+      "// ---------------------------------- 错误处理，如果chart.error存在，则下面的api都将不应该被执行 ----------------------------------",
+      "",
+      "const error = ref(props.chart.error)",
+      "",
+      "// ---------------------------------- 组件渲染逻辑 ----------------------------------",
+      "",
+      "// ---------------------------------- 数据格式化 ----------------------------------",
+      "",
+      "// ---------------------------------- 渲染、重渲染功能 ----------------------------------",
+      "",
+      "// 渲染",
+      "const render = (data) => {}",
+      "// 重渲染",
+      "const change = (data) => {}",
+      "",
+      "// ---------------------------------- 放大功能 ----------------------------------",
+      "// 是否放大",
+      "const isZoom = ref(false)",
+      "// 放大数据",
+      "const zoom = (data) => {",
+      "  isZoom.value = true",
+      "  // 放大后图表的高度",
+      "  const height = window.innerHeight * 0.6",
+      "  addTaskToBrowserMainThread(() => {})",
+      "}",
+      "",
+      "// ---------------------------------- 暴露api ----------------------------------",
+      "defineExpose({",
+      "  render,",
+      "  change,",
+      "  zoom",
+      "})",
+      "</script>",
+      "",
+      "<style lang=\"scss\" scoped></style>",
+      ""
+    ],
+    "description": "vue-chart"
+  }
 }

.vscode/tailwind.json

@@ -1,55 +1,55 @@
 {
-    "version": 1.1,
-    "atDirectives": [
-      {
-        "name": "@tailwind",
-        "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
-        "references": [
-          {
-            "name": "Tailwind Documentation",
-            "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
-          }
-        ]
-      },
-      {
-        "name": "@apply",
-        "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
-        "references": [
-          {
-            "name": "Tailwind Documentation",
-            "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
-          }
-        ]
-      },
-      {
-        "name": "@responsive",
-        "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
-        "references": [
-          {
-            "name": "Tailwind Documentation",
-            "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
-          }
-        ]
-      },
-      {
-        "name": "@screen",
-        "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
-        "references": [
-          {
-            "name": "Tailwind Documentation",
-            "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
-          }
-        ]
-      },
-      {
-        "name": "@variants",
-        "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
-        "references": [
-          {
-            "name": "Tailwind Documentation",
-            "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
-          }
-        ]
-      }
-    ]
-  }
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

package.json

@@ -8,7 +8,9 @@
     "dev:mock": "vite --mode mock",
     "build": "vite build",
     "build.release": "vite build --mode release",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "fmt": "npx prettier --write .",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.31",
@@ -36,6 +38,7 @@
     "tailwindcss": "^3.3.5",
     "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "husky": "^8.0.0"
   }
 }

vue/src/i18n/en-US/sider.json

@@ -1,12 +1,12 @@
 {
-    "version": {
+  "version": {
     "version": "Current Version: v{version}, View",
     "updates": "Release Notes"
-    },
-    "nav": {
+  },
+  "nav": {
     "home": "Overview",
     "search": "Search Experiments...",
     "experiment": "Experiment",
     "help": "Help"
-    }
+  }
 }

vue/src/theme/color.min.css

@@ -1 +1,17 @@
-:root{--background-overlay:rgba(15,21,36,0.8);--background-default:#ffffff;--background-dimmer:#f6f8fa;--outline-default:#d1d7dd;--foreground-default:#000000;--foreground-dimmer:#555555;--foreground-dimmest:#858585;--positive-highest:#d5e4d9;--positive-higher:#cff1d8;--positive-default:#4e9553;--positive-dimmer:#37733c;--primary-default:#1c74dd;--primary-dimmest:#d6e8ff;--negative-default:#bb4c51;--nagative-dimmest:#eddcdc}
+:root {
+  --background-overlay: rgba(15, 21, 36, 0.8);
+  --background-default: #ffffff;
+  --background-dimmer: #f6f8fa;
+  --outline-default: #d1d7dd;
+  --foreground-default: #000000;
+  --foreground-dimmer: #555555;
+  --foreground-dimmest: #858585;
+  --positive-highest: #d5e4d9;
+  --positive-higher: #cff1d8;
+  --positive-default: #4e9553;
+  --positive-dimmer: #37733c;
+  --primary-default: #1c74dd;
+  --primary-dimmest: #d6e8ff;
+  --negative-default: #bb4c51;
+  --nagative-dimmest: #eddcdc;
+}