aa07286010
- Update xiaoqi client configuration: adjust clientId, sync appid across config files and switch to production build by setting developVersion to false - Refactor AiTabSwitch component to use background images instead of inline image tags, clean up redundant SCSS styles and replace tab icon assets - Add three new Discovery page tool components: audio guide, map guide and photo generator cards - Clean up unused code in Discovery page and ChatMainList component, remove unused scroll view and computed property - Fix regex pattern and formatting issues in update-appid.js script - Comment out unused SpriteAnimator component in ChatMainList
60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<template>
|
|
<view class="ai-tab-wrapper">
|
|
<view class="tab-container">
|
|
<view class="tab-item is-left" :class="{ active: modelValue === 0 }" :style="leftBackgroundStyle"
|
|
@tap="handleSwitch(0)">
|
|
<text class="tab-text">探索发现</text>
|
|
</view>
|
|
|
|
<view class="tab-item is-right" :class="{ active: modelValue === 1 }" :style="rightBackgroundStyle"
|
|
@tap="handleSwitch(1)">
|
|
<text class="tab-text">AI伴游</text>
|
|
<text v-if="showDot"
|
|
:class="['status-dot', modelValue === 1 ? 'status-dot--active' : 'status-dot--inactive']" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
import leftSelected from "./images/L_02.png";
|
|
import leftUnselected from "./images/L_01.png";
|
|
import rightSelected from "./images/R_02.png";
|
|
import rightUnselected from "./images/R_01.png";
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Number, default: 0 },
|
|
showDot: { type: Boolean, default: true },
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue", "change"]);
|
|
|
|
const getBackgroundStyle = (selectedImage, unselectedImage, active) => {
|
|
const image = active
|
|
? (selectedImage || unselectedImage)
|
|
: (unselectedImage || selectedImage);
|
|
|
|
return {
|
|
backgroundImage: image ? `url(${image})` : "none",
|
|
};
|
|
};
|
|
|
|
const leftBackgroundStyle = computed(() =>
|
|
getBackgroundStyle(leftSelected, leftUnselected, props.modelValue === 0)
|
|
);
|
|
|
|
const rightBackgroundStyle = computed(() =>
|
|
getBackgroundStyle(rightSelected, rightUnselected, props.modelValue === 1)
|
|
);
|
|
|
|
const handleSwitch = (index) => {
|
|
emit("update:modelValue", index);
|
|
emit("change", index);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|