release: alpha (#61)

swpu-acm · Nov 30, 2024 · c59cd4d · c59cd4d
1 parent 2412d98
commit c59cd4d
Show file tree

Hide file tree

Showing 21 changed files with 447 additions and 110 deletions.
diff --git a/.changes/optimize-ui.md b/.changes/optimize-ui.md
@@ -0,0 +1,13 @@
+---
+"algohub": patch:perf
+---
+
+Optimize UI for better performance
+
+- Use `postcss` instead of use `tailwindcss` directly.
+- Optimize color design in light mode.
+- Add `loading` state for pages.
+- Wrap problems list with PrimeVue `Panel` component.
+- Fix bread crumps padding if no links.
+- Remove `mode` and add `owner` when creating a problem.
+- Prepare for `alpha` release.
diff --git a/.changes/pre.json b/.changes/pre.json
@@ -1,5 +1,5 @@
 {
-  "tag": "nightly",
+  "tag": "alpha",
   "changes": [
     ".changes/add-icon.md",
     ".changes/breadcrumb.md",

diff --git a/.github/workflows/covector-version-or-publish.yml b/.github/workflows/covector-version-or-publish.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - alpha
 
 permissions:
   # required for npm provenance

diff --git a/.gitignore b/.gitignore
@@ -26,8 +26,5 @@ dist-ssr
 # unplugin-vue-components
 components.d.ts
 
-# Tailwind CSS
-tailwind.css
-
 # Autogenerated files
 .aur_ssh_key
diff --git a/farm.config.ts b/farm.config.ts
@@ -1,14 +1,15 @@
 import { defineConfig } from "@farmfe/core";
 import vue from "@vitejs/plugin-vue";
 import worker from "@farmfe/plugin-worker";
+import postcss from "@farmfe/js-plugin-postcss";
 import Components from "unplugin-vue-components/vite";
 import { PrimeVueResolver } from "@primevue/auto-import-resolver";
 import path from "path";
 
 const host = process.env.TAURI_DEV_HOST;
 
 export default defineConfig({
-  plugins: [worker()],
+  plugins: [worker(), postcss()],
   vitePlugins: [
     vue(),
     Components({

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>AlgoHub</title>
   </head>
 
-  <body class="bg-zinc-200 dark:bg-zinc-950">
+  <body class="bg-zinc-50 dark:bg-zinc-950">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package.json b/package.json
@@ -16,17 +16,20 @@
     "publish:aur": "node scripts/release-aur.mjs"
   },
   "dependencies": {
+    "@farmfe/js-plugin-postcss": "^1.9.0",
     "@farmfe/plugin-worker": "^0.0.6",
     "@monaco-editor/loader": "^1.4.0",
     "@primevue/forms": "^4.2.2",
     "@primevue/themes": "^4.2.2",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-shell": "^2.0.1",
+    "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
     "md-editor-v3": "^5.0.2",
     "monaco-editor": "^0.52.0",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.1.3",
+    "postcss": "^8.4.49",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.2",
     "vue": "^3.5.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/input.css → src/assets/tailwind.css b/input.css → src/assets/tailwind.css
diff --git a/src/components/UniversalToolBar.vue b/src/components/UniversalToolBar.vue
@@ -4,14 +4,21 @@ import { useToast } from 'primevue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-const props = defineProps<{
-    path?: {
-        icon: string,
-        label: string,
-        link: string,
-        command: () => void
-    }[]
-}>()
+const { path, separateBottom } = defineProps({
+    path: {
+        type: Object as () => {
+            icon: string,
+            label: string,
+            link: string,
+            command: () => void
+        }[],
+        default: []
+    },
+    separateBottom: {
+        type: Boolean,
+        default: undefined
+    }
+})
 
 const router = useRouter();
 const toast = useToast();
@@ -73,6 +80,13 @@ const createMenuItems = ref([
 const toggleCreateMenu = (event: any) => {
     menu.value.toggle(event);
 };
+
+const toString = (value: any) => {
+    if (typeof value === 'function') {
+        return value.toString();
+    }
+    return value;
+}
 </script>
 
 <template>
@@ -108,20 +122,22 @@ const toggleCreateMenu = (event: any) => {
             </footer>
         </template>
     </Drawer>
-    <div class="bg-gray-100 dark:bg-zinc-900 flex flex-row items-center 
-    justify-between w-full py-1 px-3 flex-wrap border-zinc-300 shadow-sm">
+    <div class="bg-gray-100 dark:bg-zinc-900 flex flex-row items-center justify-between w-full py-3 px-5 flex-wrap"
+        :class="{ 'border-b-[1.2px] border-zinc-300 dark:border-zinc-600 shadow-sm': separateBottom ?? true }">
         <div class="inline-flex justify-center items-center">
             <img :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" width="40"></img>
-            <Breadcrumb v-if="props.path?.length" :model="props.path" class="!bg-transparent">
+            <Breadcrumb v-if="path?.length" :model="path" class="!bg-transparent !p-0">
                 <template #item="{ item }">
-                    <a :class="item.link ? 'cursor-pointer' : ''" :href="item.link">
-                        <span :class="item.icon"></span>
-                        <span>{{ item.label }}</span>
+                    <Button v-if="item.link" v-ripple @click="router.push(item.link)" :icon="item.icon" :label="toString(item.label)" size="small" plain
+                        text></Button>
+                    <a v-else :href="item.link" class="px-2">
+                        <span v-if="item.icon" class="item.icon"></span>
+                        <span class="text-sm">{{ item.label }}</span>
                     </a>
                 </template>
                 <template #separator> / </template>
             </Breadcrumb>
-            <Skeleton v-else width="100px" height="20px"></Skeleton>
+            <Skeleton v-else class="ml-2 my-1" width="100px" height="20px"></Skeleton>
         </div>
         <div class="inline-flex justify-center items-center gap-3">
             <Button v-ripple @click="toggleCreateMenu" aria-haspopup="true" aria-controls="overlay_menu" plain outlined>

diff --git a/src/config.ts b/src/config.ts
@@ -1,3 +1,3 @@
 export const config = {
-  base: "http://localhost:8000/",
+  base: "https://api.swpu-acm.org/",
 };
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
@@ -107,7 +107,6 @@ interface ProblemForm {
   test_cases: { input: string; output: string }[];
   categories: string[];
   tags: string[];
-  mode: "ICPC" | "OI";
   private: boolean;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ on: @@
       push:
         branches:
           - main
+          - alpha
     permissions:
       # required for npm provenance
@@ Expand Down @@