feat: style

d2-admin/components/demo/playground-controller.vue

@@ -3,16 +3,19 @@
     {{ label }}
   </p>
   <section class="body">
-    <button
+    <el-button
       v-for="item in options"
       :key="item"
-      :color="value === item ? 'indigo' : ''"
-      :icon="buttonIcon(item)"
-      size="small"
+      :type="value === item ? 'primary' : ''"
+      size="mini"
       @click="onClick(item)"
     >
+      <d2-icon
+        v-if="buttonIcon(item)"
+        :name="buttonIcon(item)"
+      />
       {{ buttonLabel(item) }}
-    </button>
+    </el-button>
   </section>
 </template>
 

d2-admin/components/demo/section.vue

@@ -1,7 +1,9 @@
 <template>
-  <section class="my-4">
-    <h2 class="mb-4 text-lg text-gray-500 select-none">{{ title }}</h2>
-    <slot></slot>
+  <section class="m-4">
+    <h2 class="mb-4 text-lg text-gray-500 select-none">
+      {{ title }}
+    </h2>
+    <slot/>
   </section>
 </template>
 

src/views/dashboard/demo/component/flex/playground.vue

@@ -21,10 +21,26 @@
         </d2-flex>
       </d2-flex>
       <div>
-        <demo-playground-control label="dir" :options="dir" v-model:value="dirValue"></demo-playground-control>
-        <demo-playground-control label="main" :options="main" v-model:value="mainValue"></demo-playground-control>
-        <demo-playground-control label="cross" :options="cross" v-model:value="crossValue"></demo-playground-control>
-        <demo-playground-control label="box" :options="box" v-model:value="boxValue"></demo-playground-control>
+        <demo-playground-controller
+          label="dir"
+          :options="dir"
+          v-model:value="dirValue"
+        />
+        <demo-playground-controller
+          label="main"
+          :options="main"
+          v-model:value="mainValue"
+        />
+        <demo-playground-controller
+          label="cross"
+          :options="cross"
+          v-model:value="crossValue"
+        />
+        <demo-playground-controller
+          label="box"
+          :options="box"
+          v-model:value="boxValue"
+        />
       </div>
     </d2-flex>
   </demo-section>

tailwind.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   mode: 'jit',
   purge: [
-    './public/**/*.html',
-    './src/**/*.{js,jsx,ts,tsx,vue}'
+    './*.html',
+    './src/**/*.{js,jsx,vue}',
+    './d2-admin/**/*.{js,jsx,vue}',
+    './d2-projects/**/*.{js,jsx,vue}'
   ],
   darkMode: false,
   theme: {