feat: css 抽取

lkzc19 · Aug 19, 2024 · 26142d2 · 26142d2
1 parent 8212ba0
commit 26142d2
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 18 deletions.
diff --git a/v-demo/demo-fs/fs-nuxt/app.vue b/v-demo/demo-fs/fs-nuxt/app.vue
@@ -12,3 +12,10 @@ useSeoMeta({
     <UNotifications />
   </div>
 </template>
+
+<style>
+body {
+  @apply h-full
+  bg-gray-100 dark:bg-stone-900
+}
+</style>
diff --git a/v-demo/demo-fs/fs-nuxt/components/FileTable.vue b/v-demo/demo-fs/fs-nuxt/components/FileTable.vue
@@ -119,9 +119,9 @@ const mkdir = async () => {
         ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
         rounded: '',
         divide: 'divide-y divide-gray-200 dark:divide-gray-700',
-        header: { padding: 'px-4 py-5' },
+        header: { padding: 'px-4 py-5', rounded: 'rounded-sm' },
         body: { padding: '', base: 'divide-y divide-gray-200 dark:divide-gray-700' },
-        footer: { padding: 'p-4' }
+        footer: { padding: 'p-4', rounded: 'rounded-sm' }
       }"
   >
 

diff --git a/v-demo/demo-fs/fs-nuxt/components/Search.vue b/v-demo/demo-fs/fs-nuxt/components/Search.vue
@@ -28,22 +28,18 @@ const handleInput = async () => {
 
 <template>
   <div>
-    <UContainer
-        class="flex items-center relative bg-slate-900 border border-gray-200 dark:border-gray-800 py-3 px-2"
-        :ui="{padding: 'lg:px-6'}"
-    >
+    <div class="search-container">
       <UIcon name="heroicons:magnifying-glass" class="mr-2" />
       <input type="text"
              placeholder="搜索..."
-             class="focus:border-transparent focus:outline-none grow bg-slate-900 py-2"
+             class="search-container-input"
              v-model="v"
              @focus="handleFocus"
              @blur="handleBlur"
              @input="handleInput"
       />
-    </UContainer>
-<!--    border-t-->
-    <ul class="absolute mt-1 border border-gray-200 dark:border-gray-800 px-6 bg-slate-900 w-1/2 z-50"
+    </div>
+    <ul class="absolute mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-gray-800 px-6 w-1/2 z-50"
         v-show=" (isFocused && fileList.length > 0)"
     >
       <li v-for="it in fileList" class="py-1">
@@ -69,5 +65,18 @@ const handleInput = async () => {
 </template>
 
 <style scoped>
+.search-container {
+  @apply relative
+  flex items-center
+  bg-white dark:bg-slate-900
+  border border-gray-200 dark:border-gray-800 rounded-sm
+  py-3 px-6
+}
+
+.search-container-input {
+  @apply focus:border-transparent focus:outline-none grow
+  dark:bg-slate-900
+  py-2
+}
 
 </style>
diff --git a/v-demo/demo-fs/fs-nuxt/components/Upload.vue b/v-demo/demo-fs/fs-nuxt/components/Upload.vue
@@ -12,7 +12,7 @@ const tabs = [{
 }]
 
 const fileInput = ref<HTMLInputElement>()
-const currentIndex = ref(1)
+const currentIndex = ref(0)
 
 const openFileSelector = () => {
   fileInput.value?.click()
@@ -25,34 +25,63 @@ const handleUpload = () => {
 <template>
   <div class="flex flex-row">
     <input type="file" ref="fileInput" class="hidden">
-    <ol class="bg-slate-900 border border-gray-200 dark:border-gray-800 rounded-sm p-1 items-center text-center">
+    <ol class="upload-ol">
       <li
           v-for="(it, index) in tabs"
           :key="index"
           @click="currentIndex = index"
           :class="{ active: index == currentIndex }"
-          class="flex items-center px-10 py-1 rounded-sm"
+          class="upload-li"
       >
         <UIcon name="heroicons:link-16-solid" class="mr-2" v-if="index == currentIndex" />
         <UIcon :name="it.icon" class="mr-2" v-else />
         {{ it.label }}
       </li>
     </ol>
 
-    <div class="bg-slate-900 border-2 border-dashed border-gray-200 dark:border-gray-800 grow mx-2 flex justify-center items-center cursor-pointer"
+    <div class="upload-div"
          @click="openFileSelector"
     >
-      <UIcon name="heroicons:plus-16-solid" />
+      <UIcon name="heroicons:plus-16-solid"  />
     </div>
 
-    <div class="bg-slate-900 border border-gray-200 dark:border-gray-800 flex justify-center content-center">
+    <div class="upload-button">
       <UButton icon="heroicons:arrow-up-tray-16-solid" variant="none" color="black" class="px-2" :to="handleUpload" />
     </div>
   </div>
 </template>
 
 <style scoped>
 .active {
-  @apply bg-slate-800;
+  @apply bg-gray-100 dark:bg-slate-800;
+}
+
+.upload-ol {
+  @apply bg-white dark:bg-slate-900
+  border border-gray-200 dark:border-gray-800 rounded-sm
+  p-1
+  items-center text-center
+}
+
+.upload-li {
+  @apply flex items-center
+  px-10 py-1
+  rounded-sm
+  cursor-pointer
+}
+
+.upload-div {
+  @apply bg-white dark:bg-slate-900
+  border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-sm
+  grow
+  mx-2
+  flex justify-center items-center
+  cursor-pointer
+}
+
+.upload-button {
+  @apply bg-white dark:bg-slate-900
+  border border-gray-200 dark:border-gray-800 rounded-sm
+  flex justify-center content-center
 }
 </style>
diff --git a/v-demo/demo-fs/fs-nuxt/pages/[...slug].vue b/v-demo/demo-fs/fs-nuxt/pages/[...slug].vue
@@ -27,7 +27,6 @@ const baseURL = useRuntimeConfig().public.baseUrl
 </template>
 
 <style scoped>
-
 .center {
   @apply font-mono w-1/2 mx-auto
 }