refactor: clean up styles, configs and home page

- Migrate inline styles for ChatMainList, AigcPhotoCard and SpriteAnimator, delete unused SCSS files
- Update development proxy target in vite.config.ts and env variables including client ID and token
- Fix prop references and styling in ChatInputArea and Welcome components
- Enable and refactor Calender component integration with proper event handling
- Add tabbed layout to ChatMainList with Discovery and chat message sections
- Update Vue 3 component patterns for better maintainability
- Temporarily comment out ChatInputArea in ChatMainList

src/pages/home/components/AigcPhotoCard/index.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="aigc-photo-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
-    @click="handleAction">
-    <img class="aigc-photo-card__image block w-full" :src="data.cover" />
-    <div class="aigc-photo-card__shade"></div>
+  <div class="h-[272px] bg-[#0f172a] relative rounded-[24px] overflow-hidden w-full"
+    :class="{ 'is-disabled': disabled }" @click="handleAction">
+    <img class="block w-full" :src="data.cover" />
+    <div class="absolute inset-0 bg-[#0f172a]/38"></div>
 
-    <div class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
-      <div class="aigc-photo-card__triangle"></div>
+    <div
+      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[76px] h-[76px] border border-white/50 bg-white/30 flex items-center justify-center rounded-full">
+      <div
+        class="w-0 h-0 ml-[6px] border-t-[17px] border-t-transparent border-b-[17px] border-b-transparent border-l-[23px] border-l-white">
+      </div>
     </div>
 
-    <div class="aigc-photo-card__title color-white font-size-16 font-900">
+    <div
+      class="absolute inset-x-0 bottom-[72px] text-center leading-[22px] tracking-normal [text-shadow:0_2px_8px_rgba(0,0,0,0.32)] text-white text-[16px] font-bold">
       {{ data.title }}
     </div>
   </div>
 </template>
 
 <script setup>
+import { defineProps, defineEmits } from 'vue'
+
 const props = defineProps({
   data: {
     type: Object,
@@ -34,7 +40,3 @@ const handleAction = () => {
   emit("action", props.data);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/pages/home/components/AigcPhotoCard/styles/index.scss

@@ -1,54 +0,0 @@
-.aigc-photo-card {
-  height: 272px;
-  background: #0f172a;
-}
-
-.aigc-photo-card:active {
-  opacity: 0.86;
-}
-
-.aigc-photo-card.is-disabled {
-  opacity: 0.55;
-}
-
-.aigc-photo-card__image {
-  height: 100%;
-}
-
-.aigc-photo-card__shade {
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.38);
-}
-
-.aigc-photo-card__play {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 76px;
-  height: 76px;
-  border: 1px solid rgba(255, 255, 255, 0.48);
-  background: rgba(255, 255, 255, 0.28);
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-}
-
-.aigc-photo-card__triangle {
-  width: 0;
-  height: 0;
-  margin-left: 6px;
-  border-top: 17px solid transparent;
-  border-bottom: 17px solid transparent;
-  border-left: 23px solid #fff;
-}
-
-.aigc-photo-card__title {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 72px;
-  text-align: center;
-  line-height: 22px;
-  letter-spacing: 0;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
-}