feat: ai style

apps/web-antd/src/views/ai/image/index/index.vue

@@ -90,9 +90,9 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <div class="bg-card absolute inset-0 flex h-full w-full flex-row">
-      <div class="left-0 flex w-96 flex-col p-4">
-        <div class="segmented flex justify-center">
+    <div class="absolute inset-0 m-4 flex h-full w-full flex-row">
+      <div class="bg-card left-0 mr-4 flex w-96 flex-col rounded-lg p-4">
+        <div class="flex justify-center">
           <Segmented
             v-model:value="selectPlatform"
             :options="platformOptions"
@@ -125,7 +125,7 @@ onMounted(async () => {
           />
         </div>
       </div>
-      <div class="bg-card ml-4 flex-1">
+      <div class="bg-card flex-1">
         <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
       </div>
     </div>

apps/web-antd/src/views/ai/write/index/components/Left.vue

@@ -123,8 +123,10 @@ function submit() {
 <template>
   <DefineTab v-slot="{ active, text, itemClick }">
     <span
-      :class="active ? 'text-black shadow-md' : 'hover:bg-gray-200'"
-      class="relative z-10 inline-block w-1/2 cursor-pointer rounded-full text-center leading-7 text-gray-400 hover:text-black"
+      :class="
+        active ? 'bg-primary-600 text-white shadow-md' : 'hover:bg-primary-200'
+      "
+      class="relative z-10 inline-block w-1/2 cursor-pointer rounded-full text-center leading-7 hover:text-black"
       @click="itemClick"
     >
       {{ text }}
@@ -136,7 +138,7 @@ function submit() {
       <span>{{ label }}</span>
       <span
         v-if="hint"
-        class="flex cursor-pointer select-none items-center text-xs text-purple-500"
+        class="text-primary-500 flex cursor-pointer select-none items-center text-xs"
         @click="hintClick"
       >
         <IconifyIcon icon="lucide:circle-help" />
@@ -145,14 +147,14 @@ function submit() {
     </h3>
   </DefineLabel>
   <div class="flex flex-col" v-bind="$attrs">
-    <div class="flex w-full justify-center bg-gray-50 pt-2">
-      <div class="z-10 w-72 rounded-full bg-gray-200 p-1">
+    <div class="bg-card flex w-full justify-center pt-2">
+      <div class="bg-card z-10 w-72 rounded-full p-1">
         <div
           :class="
             selectedTab === AiWriteTypeEnum.REPLY &&
             'after:translate-x-[100%] after:transform'
           "
-          class="relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:bg-white after:transition-transform after:content-['']"
+          class="after:bg-card relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:transition-transform after:content-['']"
         >
           <ReuseTab
             v-for="tab in tabs"
@@ -166,7 +168,7 @@ function submit() {
       </div>
     </div>
     <div
-      class="box-border h-full w-96 flex-grow overflow-y-auto bg-gray-50 px-7 pb-2 lg:block"
+      class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
     >
       <div>
         <template v-if="selectedTab === 1">
@@ -233,11 +235,7 @@ function submit() {
           <Button :disabled="isWriting" class="mr-2" @click="reset">
             重置
           </Button>
-          <Button
-            :loading="isWriting"
-            class="bg-purple-500 text-white"
-            @click="submit"
-          >
+          <Button type="primary" :loading="isWriting" @click="submit">
             生成
           </Button>
         </div>

apps/web-antd/src/views/ai/write/index/components/Right.vue

@@ -54,22 +54,18 @@ watch(copied, (val) => {
 });
 </script>
 <template>
-  <Card class="my-card flex h-full flex-col">
+  <Card class="flex h-full flex-col">
     <template #title>
       <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
         <span>预览</span>
         <!-- 展示在右上角 -->
         <Button
-          class="flex bg-purple-500 text-white"
+          type="primary"
           v-show="showCopy"
           @click="copyContent"
           size="small"
         >
-          <template #icon>
-            <div class="flex items-center justify-center">
-              <IconifyIcon icon="lucide:copy" />
-            </div>
-          </template>
+          <IconifyIcon icon="lucide:copy" />
           复制
         </Button>
       </h3>
@@ -79,7 +75,7 @@ watch(copied, (val) => {
       class="hide-scroll-bar box-border h-full overflow-y-auto"
     >
       <div
-        class="relative box-border min-h-full w-full flex-grow bg-white p-3 sm:p-7"
+        class="bg-card relative box-border min-h-full w-full flex-grow p-3 sm:p-7"
       >
         <!-- 终止生成内容的按钮 -->
         <Button

apps/web-antd/src/views/ai/write/index/components/Tag.vue

@@ -21,8 +21,10 @@ const emits = defineEmits<{
     <span
       v-for="tag in props.tags"
       :key="tag.value"
-      class="mb-2 cursor-pointer rounded border-2 border-solid border-gray-200 bg-gray-200 px-1 text-xs leading-6"
-      :class="modelValue === tag.value && '!border-purple-500 !text-purple-500'"
+      class="bg-card border-card-100 mb-2 cursor-pointer rounded border-2 border-solid px-1 text-xs leading-6"
+      :class="
+        modelValue === tag.value && '!border-primary-500 !text-primary-500'
+      "
       @click="emits('update:modelValue', tag.value)"
     >
       {{ tag.label }}

apps/web-antd/src/views/ai/write/index/index.vue

@@ -66,10 +66,10 @@ function reset() {
 
 <template>
   <Page auto-content-height>
-    <div class="absolute bottom-0 left-0 right-0 top-0 flex">
+    <div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
       <Left
         :is-writing="isWriting"
-        class="h-full"
+        class="mr-4 h-full rounded-lg"
         @submit="submit"
         @reset="reset"
         @example="handleExampleClick"