perf: improve styles (#11)

优化 Console 端部分 HTML 结构和样式。 /kind improvement ```release-note 优化 Console 端部分 HTML 结构和样式。 ```
halo-sigs · Apr 6, 2023 · dfb2116 · dfb2116
1 parent 7a34691
commit dfb2116
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 96 deletions.
diff --git a/console/.eslintrc.cjs b/console/.eslintrc.cjs
@@ -4,12 +4,15 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
     "eslint:recommended",
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier",
   ],
   env: {
     "vue/setup-compiler-macros": true,
   },
+  rules: {
+    "vue/no-v-html": "off",
+  },
 };
diff --git a/console/src/components/MediaCard.vue b/console/src/components/MediaCard.vue
@@ -58,7 +58,7 @@ const getExtname = (type: string) => {
         </video>
         <div
           v-else
-          class="flex h-full w-full flex-col items-center justify-center gap-1 moments-bg-gray-100"
+          class="flex h-full w-full flex-col items-center justify-center moments-space-y-1 moments-bg-gray-100"
         >
           <LucideFileVideo />
           <span class="font-sans text-xs text-gray-500">

diff --git a/console/src/components/MomentEdit.vue b/console/src/components/MomentEdit.vue
@@ -35,6 +35,7 @@ const initMoment: Moment = {
     },
     releaseTime: new Date(),
     owner: "",
+    visible: "PUBLIC",
   },
   metadata: {
     generateName: "moment-",
@@ -240,11 +241,17 @@ const addMediumVerify = () => {
 
   return true;
 };
+
+function handleToggleVisible() {
+  const { visible: currentVisible } = formState.value.spec;
+  formState.value.spec.visible =
+    currentVisible === "PUBLIC" ? "PRIVATE" : "PUBLIC";
+}
 </script>
 
 <template>
   <div
-    class="card moments-w-[25rem] md:moments-w-[40rem] moments-bg-white moments-shrink moments-border moments-rounded-md moments-overflow-hidden focus-within:shadow-lg"
+    class="card moments-bg-white moments-shrink moments-border moments-rounded-md moments-overflow-hidden focus-within:shadow-lg"
   >
     <AttachmentSelectorModal
       v-model:visible="attachmentSelectorModal"
@@ -257,10 +264,7 @@ const addMediumVerify = () => {
       class="moments-min-h-[9rem] moments-p-3.5"
     />
     <div
-      v-if="
-        !!formState.spec.content.medium &&
-        formState.spec.content.medium.length > 0
-      "
+      v-if="formState.spec.content.medium?.length"
       class="img-box moments-flex moments-px-3.5 moments-py-2"
     >
       <ul role="list">
@@ -271,15 +275,12 @@ const addMediumVerify = () => {
         >
           <MediaCard :media="media" @remove="removeMedium"></MediaCard>
         </li>
-        <li class="moments-inline-block">
-          <div></div>
-        </li>
       </ul>
     </div>
     <div
-      class="moments-h-8 moments-bg-white moments-flex moments-justify-between moments-mb-1"
+      class="moments-bg-white moments-flex moments-justify-between moments-px-3.5 moments-py-2"
     >
-      <div class="moments-left-0 moments-h-fit moments-ml-3.5">
+      <div class="moments-h-fit">
         <VButton
           size="sm"
           type="primary"
@@ -291,37 +292,36 @@ const addMediumVerify = () => {
         </VButton>
       </div>
 
-      <div class="moments-flex moments-items-center">
-        <div class="moments-right-0 moments-mr-3.5 moments-cursor-pointer">
+      <div class="moments-flex moments-items-center moments-space-x-2.5">
+        <button
+          v-tooltip="{
+            content:
+              formState.spec.visible === 'PRIVATE' ? `私有访问` : '公开访问',
+          }"
+          class="moments-cursor-pointer moments-inline-flex moments-text-gray-500 hover:moments-text-gray-900 moments-items-center moments-rounded moments-h-7 hover:moments-bg-teal-100 moments-px-3"
+          @click="handleToggleVisible()"
+        >
           <IconEyeOff
             v-if="formState.spec.visible === 'PRIVATE'"
-            v-tooltip="`私有访问`"
-            @click="formState.spec.visible = 'PUBLIC'"
+            class="moments-h-4 moments-w-4"
           />
-          <IconEye
-            v-else
-            @click="formState.spec.visible = 'PRIVATE'"
-            v-tooltip="`公开访问`"
-          />
-        </div>
+          <IconEye v-else class="moments-h-4 moments-w-4" />
+        </button>
 
-        <div
+        <button
           v-if="isUpdateMode"
-          class="moments-right-0 moments-mr-3.5 moments-cursor-pointer moments-px-3 moments-rounded moments-h-7 hover:moments-bg-teal-100"
+          class="moments-cursor-pointer moments-text-gray-500 hover:moments-text-gray-900 moments-inline-flex moments-items-center moments-rounded moments-h-7 hover:moments-bg-teal-100 moments-px-3"
           @click="handlerCancel"
         >
-          <span class="moments-text-xs moments-text-gray-500">取消</span>
-        </div>
+          <span class="moments-text-xs"> 取消 </span>
+        </button>
 
-        <div
-          class="moments-right-0 moments-h-fit moments-mr-3.5"
-          v-permission="['plugin:moments:manage']"
-        >
+        <div v-permission="['plugin:moments:manage']" class="moments-h-fit">
           <VButton
+            v-model:disabled="saveDisable"
             :loading="saving"
             size="sm"
             type="primary"
-            v-model:disabled="saveDisable"
             @click="handlerCreateOrUpdateMoment"
           >
             <template #icon>

diff --git a/console/src/components/MomentItem.vue b/console/src/components/MomentItem.vue
@@ -44,7 +44,7 @@ const handlerCancel = () => {
 };
 </script>
 <template>
-  <div class="moments-flex moments-justify-center moments-mt-2">
+  <div>
     <MomentEdit
       v-if="editing"
       :moment="editingMoment"

diff --git a/console/src/components/MomentPreview.vue b/console/src/components/MomentPreview.vue
@@ -135,7 +135,7 @@ const getExtname = (type: string) => {
     </template>
   </PreviewDetailModal>
   <div
-    class="preview card moments-bg-white moments-shrink moments-border moments-rounded-md moments-p-3.5 moments-relative moments-w-[25rem] md:moments-w-[40rem]"
+    class="preview card moments-bg-white moments-shrink moments-border moments-rounded-md moments-p-3.5 moments-relative"
     @dblclick="handleDblclick"
   >
     <div
@@ -152,13 +152,13 @@ const getExtname = (type: string) => {
       </div>
 
       <div
-        class="moments-absolute moments-right-3.5"
         v-permission="['plugin:moments:manage']"
+        class="moments-absolute moments-right-3.5"
       >
         <VDropdown
           compute-transform-origin
           :triggers="['click']"
-          :popperTriggers="['click']"
+          :popper-triggers="['click']"
         >
           <IconMore class="moments-text-gray-500 moments-cursor-pointer" />
           <template #popper>
@@ -198,10 +198,12 @@ const getExtname = (type: string) => {
             </template>
             <template v-else-if="media.type == 'VIDEO'">
               <div
-                class="flex h-full w-full flex-col items-center justify-center gap-1 moments-bg-gray-100"
+                class="moments-flex moments-h-full moments-w-full moments-flex-col moments-items-center moments-justify-center moments-space-y-1 moments-bg-gray-100"
               >
                 <LucideFileVideo />
-                <span class="font-sans text-xs text-gray-500">
+                <span
+                  class="moments-font-sans moments-text-xs moments-text-gray-500"
+                >
                   {{ getExtname(media.originType) }}
                 </span>
               </div>

diff --git a/console/src/styles/tailwind.css b/console/src/styles/tailwind.css
@@ -1,3 +1,2 @@
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/console/src/views/MomentsList.vue b/console/src/views/MomentsList.vue
@@ -119,44 +119,44 @@ const searchText = ref("");
 <template>
   <VPageHeader title="瞬间">
     <template #icon>
-      <MingcuteMomentsLine class="mr-2 self-center" />
+      <MingcuteMomentsLine class="moments-mr-2 moments-self-center" />
     </template>
   </VPageHeader>
 
-  <div class="moments-content moments-pb-8 md:moments-pb-0">
-    <div class="moments-mt-3 moments-mb-2">
-      <div
-        class="moment-header moments-flex moments-justify-center moments-mb-3"
-      >
-        <div
-          class="moments-w-[25rem] md:moments-w-[40rem] moments-flex moments-justify-between"
-        >
-          <div class="moments-max-w-[10rem] md:moments-max-w-auto">
-            <FormKit
-              v-model="searchText"
-              placeholder="输入关键词搜索"
-              type="text"
-              @keyup.enter="keyword = searchText"
-            ></FormKit>
-          </div>
+  <div class="moments-container moments-mx-auto">
+    <div
+      class="moments-content moments-my-2 md:moments-my-4 moments-flex moments-flex-col moments-space-y-2"
+    >
+      <div class="moment-header">
+        <div class="moments-flex moments-justify-between moments-space-x-2">
+          <FormKit
+            v-model="searchText"
+            placeholder="输入关键词搜索"
+            type="text"
+            outer-class="!moments-p-0"
+            @keyup.enter="keyword = searchText"
+          ></FormKit>
 
           <DatePicker
+            v-model:value="momentsRangeTime"
             input-class=""
             class="range-time moments-max-w-[13rem] md:moments-max-w-[15rem]"
             range
             :editable="false"
-            v-model:value="momentsRangeTime"
             placeholder="筛选日期范围"
           />
         </div>
       </div>
 
-      <div class="moments-flex moments-justify-center">
-        <MomentEdit @save="refetch()" />
-      </div>
+      <MomentEdit @save="refetch()" />
+
       <VLoading v-if="isLoading" />
+
       <Transition v-else appear name="fade">
-        <ul class="box-border divide-y divide-gray-100" role="list">
+        <ul
+          class="box-border moments-flex moments-flex-col moments-space-y-2"
+          role="list"
+        >
           <li v-for="moment in moments" :key="moment.moment.metadata.name">
             <MomentItem
               :key="moment.moment.metadata.name"
@@ -166,17 +166,16 @@ const searchText = ref("");
           </li>
         </ul>
       </Transition>
-    </div>
-    <div
-      class="moments-flex moments-justify-center"
-      v-if="hasPrevious || hasNext"
-    >
+
       <div
-        class="moments-bg-white moments-flex moments-justify-center moments-w-[25rem] md:moments-w-[40rem] moments-mb-2 moments-h-20 moments-border moments-rounded-md moments-overflow-hidden"
+        v-if="hasPrevious || hasNext"
+        s
+        class="moments-my-5 flex moments-justify-center"
       >
         <VPagination
           v-model:page="page"
           v-model:size="size"
+          class="!moments-bg-transparent"
           :total="total"
           :size-options="[20, 30, 50, 100]"
         />

diff --git a/console/tailwind.config.js b/console/tailwind.config.js
@@ -2,6 +2,16 @@
 module.exports = {
   prefix: "moments-",
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {},
+  theme: {
+    container: {
+      padding: {
+        DEFAULT: "0.5rem",
+        sm: "1.5rem",
+        lg: "4rem",
+        xl: "14rem",
+        "2xl": "22rem",
+      },
+    },
+  },
   plugins: [require("@tailwindcss/aspect-ratio")],
 };
diff --git a/src/main/resources/console/main.js b/src/main/resources/console/main.js
diff --git a/src/main/resources/console/style.css b/src/main/resources/console/style.css