smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,8 @@ import type { AiWriteApi } from '#/api/ai/write';
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { createReusableTemplate } from '@vueuse/core';
import { Button, message, Textarea } from 'ant-design-vue';
@@ -121,8 +123,8 @@ function submit() {
<template>
<DefineTab v-slot="{ active, text, itemClick }">
<span
:class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
class="z-1 relative inline-block w-1/2 cursor-pointer rounded-full text-center leading-[30px] text-[5C6370] hover:text-black"
: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"
@click="itemClick"
>
{{ text }}
@@ -130,27 +132,27 @@ function submit() {
</DefineTab>
<!-- 定义 label 组件：长度/格式/语气/语言等 -->
<DefineLabel v-slot="{ label, hint, hintClick }">
<h3 class="mb-3 mt-5 flex items-center justify-between text-[14px]">
<h3 class="mb-3 mt-5 flex items-center justify-between text-sm">
<span>{{ label }}</span>
<span
v-if="hint"
class="flex cursor-pointer select-none items-center text-[12px] text-[#846af7]"
class="flex cursor-pointer select-none items-center text-xs text-purple-500"
@click="hintClick"
>
<span class="icon-[ant-design--question-circle-outlined]"> </span>
<IconifyIcon icon="lucide:circle-help" />
{{ hint }}
</span>
</h3>
</DefineLabel>
<div class="flex flex-col" v-bind="$attrs">
<div class="flex w-full justify-center bg-[#f5f7f9] pt-2">
<div class="z-10 w-[303px] rounded-full bg-[#DDDFE3] p-1">
<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="
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-[30px] after:w-1/2 after:rounded-full after:bg-white after:transition-transform after:content-['']"
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-['']"
>
<ReuseTab
v-for="tab in tabs"
@@ -164,7 +166,7 @@ function submit() {
</div>
</div>
<div
class="box-border h-full w-[380px] flex-grow overflow-y-auto bg-[#f5f7f9] px-7 pb-2 lg:block"
class="box-border h-full w-96 flex-grow overflow-y-auto bg-gray-50 px-7 pb-2 lg:block"
>
<div>
<template v-if="selectedTab === 1">
@@ -233,7 +235,7 @@ function submit() {
</Button>
<Button
:loading="isWriting"
style="color: white; background-color: #846af7"
class="bg-purple-500 text-white"
@click="submit"
>
生成

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

@@ -1,6 +1,8 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useClipboard } from '@vueuse/core';
import { Button, Card, message, Textarea } from 'ant-design-vue';
// 粘贴板
@@ -58,15 +60,14 @@ watch(copied, (val) => {
<span>预览</span>
<!-- 展示在右上角 -->
<Button
style="color: white; background-color: #846af7"
class="flex bg-purple-500 text-white"
v-show="showCopy"
@click="copyContent"
size="small"
class="flex"
>
<template #icon>
<div class="flex items-center justify-center">
<span class="icon-[ant-design--copy-twotone]"></span>
<IconifyIcon icon="lucide:copy" />
</div>
</template>
复制
@@ -83,13 +84,13 @@ watch(copied, (val) => {
<!-- 终止生成内容的按钮 -->
<Button
v-show="isWriting"
class="z-36 absolute bottom-2 left-1/2 flex -translate-x-1/2 sm:bottom-5"
class="absolute bottom-2 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-5"
@click="emits('stopStream')"
size="small"
>
<template #icon>
<div class="flex items-center justify-center">
<span class="icon-[ant-design--stop-twotone]"></span>
<IconifyIcon icon="lucide:ban" />
</div>
</template>
终止生成

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

@@ -17,12 +17,12 @@ const emits = defineEmits<{
</script>
<template>
<div class="flex flex-wrap gap-[8px]">
<div class="flex flex-wrap gap-2">
<span
v-for="tag in props.tags"
:key="tag.value"
class="tag mb-2 cursor-pointer rounded-[4px] border-[2px] border-solid border-[#DDDFE3] bg-[#DDDFE3] px-2 text-[12px] leading-6"
:class="modelValue === tag.value && '!border-[#846af7] text-[#846af7]'"
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'"
@click="emits('update:modelValue', tag.value)"
>
{{ tag.label }}