feat:chat style

web/src/components/Welcome.vue

@@ -13,7 +13,9 @@
 
             <div class="list-box">
               <ul>
-                <li v-for="item in samples" :key="item"><a @click="send(item)">{{ item }}</a></li>
+                <li v-for="item in samples" :key="item">
+                  <a @click="send(item)">{{ item }}</a>
+                </li>
               </ul>
             </div>
           </div>
@@ -27,7 +29,9 @@
 
             <div class="list-box">
               <ul>
-                <li v-for="item in plugins" :key="item.value"><a @click="send(item.value)">{{ item.text }}</a></li>
+                <li v-for="item in plugins" :key="item.value">
+                  <a @click="send(item.value)">{{ item.text }}</a>
+                </li>
               </ul>
             </div>
           </div>
@@ -54,19 +58,18 @@
   </div>
 </template>
 <script setup>
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { getSystemInfo } from "@/store/cache";
 
-import {onMounted, ref} from "vue";
-import {ElMessage} from "element-plus";
-import {getSystemInfo} from "@/store/cache";
-
-const title = ref(process.env.VUE_APP_TITLE)
-const version = ref(process.env.VUE_APP_VERSION)
+const title = ref(process.env.VUE_APP_TITLE);
+const version = ref(process.env.VUE_APP_VERSION);
 
 const samples = ref([
   "用小学生都能听懂的术语解释什么是量子纠缠",
   "能给一位6岁男孩的生日会提供一些创造性的建议吗？",
   "如何用 Go 语言实现支持代理 Http client 请求?"
-])
+]);
 
 const plugins = ref([
   {
@@ -81,7 +84,7 @@ const plugins = ref([
     value: "今日头条",
     text: "今日头条：给用户推荐当天的头条新闻，周榜热文"
   }
-])
+]);
 
 const capabilities = ref([
   {
@@ -96,20 +99,22 @@ const capabilities = ref([
     text: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2",
     value: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2"
   }
-])
+]);
 
 onMounted(() => {
-  getSystemInfo().then(res => {
-    title.value = res.data.title
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
-})
+  getSystemInfo()
+    .then((res) => {
+      title.value = res.data.title;
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
+});
 
-const emits = defineEmits(['send']);
+const emits = defineEmits(["send"]);
 const send = (text) => {
-  emits('send', text)
-}
+  emits("send", text);
+};
 </script>
 <style scoped lang="stylus">
 .welcome {
@@ -148,10 +153,9 @@ const send = (text) => {
             font-size 14px;
             padding .75rem
             border-radius 5px;
-            background-color: rgba(247, 247, 248, 1);
-
+            background-color: var(--chat-wel-bg);
+            color:var( --theme-text-color-secondary);
             line-height 1.5
-            color #666666
 
             a {
               cursor pointer
@@ -165,4 +169,4 @@ const send = (text) => {
     }
   }
 }
-</style>
+</style>