webui: change some component style. Add tag components.

webui/src/components/basic/ab-add.vue

@@ -1,10 +1,20 @@
 <script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    round?: boolean;
+  }>(),
+  {
+    round: false,
+  }
+);
+
 defineEmits(['click']);
+
 </script>
 
 <template>
   <button
-    rounded="1/2"
+    :rounded="round ? '1/2' : '8px'"
     wh-36px
     f-cer
     rel
@@ -18,8 +28,9 @@ defineEmits(['click']);
 </template>
 
 <style lang="scss" scoped>
-$normal: #5739ca;
-$hover: #71669f;
+$normal: #4e3c94;
+$hover: #281e52;
+$active: #8e8a9c;
 
 .box {
   background: $normal;
@@ -34,8 +45,9 @@ $hover: #71669f;
 }
 
 .line {
-  width: 6px;
+  width: 4px;
   height: 18px;
+  border-radius: 1px;
   background: #fff;
 }
 </style>

webui/src/components/basic/ab-checkbox.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { Switch } from '@headlessui/vue';
+import {Switch} from '@headlessui/vue';
 
 withDefaults(
-  defineProps<{
-    small?: boolean;
-  }>(),
-  {
-    small: false,
-  }
+    defineProps<{
+      small?: boolean;
+    }>(),
+    {
+      small: false,
+    }
 );
 
-const checked = defineModel<boolean>({ default: false });
+const checked = defineModel<boolean>({default: false});
 </script>
 
 <template>
@@ -19,23 +19,26 @@ const checked = defineModel<boolean>({ default: false });
       <slot name="before"></slot>
 
       <div
-        rounded-4px
-        rel
-        f-cer
-        bg-white
-        border="3px #3c239f"
-        :class="[small ? 'wh-16px' : 'wh-32px', !checked && 'group']"
+          rel
+          f-cer
+          bg-white
+          :class="[
+            small ? 'wh-16px' : 'wh-32px',
+            !checked && 'group'
+          ]"
+          :border="small ? '2px solid #3c239f' : '4px solid #3c239f'"
+          :rounded="small ? '4px' : '6px'"
       >
         <div
-          rounded-2px
-          transition-all
-          duration-300
-          :class="[
+            rounded-2px
+            transition-all
+            duration-300
+            :class="[
             small ? 'wh-8px' : 'wh-16px',
             checked ? 'bg-[#3c239f]' : 'bg-transparent',
           ]"
-          group-hover:bg="#cccad4"
-          group-active:bg="#3c239f"
+            group-hover:bg="#cccad4"
+            group-active:bg="#3c239f"
         ></div>
       </div>
 

webui/src/components/basic/ab-tag.stories.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj} from "@storybook/vue3";
+
+import AbTag from "./ab-tag.vue";
+
+const meta: Meta<typeof AbTag> = {
+    title: "basic/ab-tag",
+    component: AbTag,
+    tags: ["autodocs"],
+}
+
+export default meta;
+type Story = StoryObj<typeof AbTag>;
+
+
+export const Template: Story = {
+    render: (args) => ({
+        components: { AbTag },
+        setup() {
+            return { args };
+        },
+        template: '<ab-tag v-bind="args" />',
+    }),
+};

webui/src/components/basic/ab-tag.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+
+withDefaults(
+    defineProps<{
+      type: 'primary' | 'warn' | 'inactive' | 'active' | 'notify';
+      title: string;
+    }>(),
+    {
+      type: 'primary',
+      title: 'title',
+    }
+);
+
+
+</script>
+
+<template>
+  <div class="round-label" :class="type">
+    {{ title }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// border
+$primary: #4e3c94;
+$warn: #892F2F;
+$inactive: #797979;
+$active: #104931;
+$notify: #F5C451;
+
+//inner
+$primary-inner: #EEE5F4;
+$warn-inner: #FFDFDF;
+$inactive-inner: #E0E0E0;
+$active-inner:#E5F4E0;
+$notify-inner: #FFF4DB;
+
+//font-color
+$primary-font: #000000;
+$warn-font: #892F2F;
+$inactive-font: #3F3F3F;
+$active-font: #4C6643;
+$notify-font: #A76E18;
+
+
+.round-label {
+    padding: 2px 12px;
+    font-size: 8px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    border-radius: 12px;
+}
+
+.primary {
+    border: 1px solid $primary;
+    background-color: $primary-inner;
+    color: $primary-font;
+}
+
+.warn {
+    border: 1px solid $warn;
+    background-color: $warn-inner;
+    color: $warn-font;
+}
+
+.inactive {
+    border: 1px solid $inactive;
+    background-color: $inactive-inner;
+    color: $inactive-font;
+}
+
+.active {
+    border: 1px solid $active;
+    background-color: $active-inner;
+    color: $active-font;
+}
+
+.notify {
+    border: 1px solid $notify;
+    background-color: $notify-inner;
+    color: $notify-font;
+}
+
+</style>

webui/types/dts/components.d.ts

@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     AbStatus: typeof import('./../../src/components/basic/ab-status.vue')['default']
     AbStatusBar: typeof import('./../../src/components/ab-status-bar.vue')['default']
     AbSwitch: typeof import('./../../src/components/basic/ab-switch.vue')['default']
+    AbTag: typeof import('./../../src/components/basic/ab-tag.vue')['default']
     AbTopbar: typeof import('./../../src/components/layout/ab-topbar.vue')['default']
     ConfigDownload: typeof import('./../../src/components/setting/config-download.vue')['default']
     ConfigManage: typeof import('./../../src/components/setting/config-manage.vue')['default']