feat:一些基础文件格式化处理

shuishen

2025-09-29 b9a26af5b08d3d92a6c38fd90e023bc4706f19eb

 src/subPackages/theme/index.vue

@@ -7,9 +7,11 @@
      </view>
      <view class="theme-bg-secondary overflow-hidden rounded-12rpx">
        <view
          v-for="option in themeOptions" :key="option.value"
          v-for="option in themeOptions"
          :key="option.value"
          class="flex items-center border-b px-5 py-7.5 transition-all duration-300"
          :class="{ 'theme-bg-secondary': theme === option.value }" @click="setTheme(option.value)"
          :class="{ 'theme-bg-secondary': theme === option.value }"
          @click="setTheme(option.value)"
        >
          <view class="mr-5">
            <view class="text-48rpx c-primary" :class="option.icon" />
@@ -36,9 +38,7 @@
      </view>
      <view class="theme-bg-secondary rounded-12rpx p-7.5">
        <view class="mb-7.5">
          <text class="theme-text text-28rpx font-medium">
            示例内容
          </text>
          <text class="theme-text text-28rpx font-medium"> 示例内容 </text>
        </view>
        <view class="mb-7.5 flex flex-wrap gap-5">
          <view class="min-w-120rpx flex-1">
@@ -55,34 +55,32 @@
          </view>
        </view>
        <view class="flex flex-col gap-2.5">
          <text class="theme-text text-28rpx font-medium">
            主要文字颜色
          </text>
          <text class="theme-text-content text-26rpx">
            内容文字颜色
          </text>
          <text class="theme-text-tips text-24rpx">
            提示文字颜色
          </text>
          <text class="theme-text text-28rpx font-medium"> 主要文字颜色 </text>
          <text class="theme-text-content text-26rpx"> 内容文字颜色 </text>
          <text class="theme-text-tips text-24rpx"> 提示文字颜色 </text>
        </view>
      </view>
    </view>

    <!-- 快速切换按钮 -->
    <view class="py-5 text-center">
      <u-button :text="isDark ? '切换到亮色主题' : '切换到暗色主题'" type="primary" @click="toggleTheme" />
      <u-button
        :text="isDark ? '切换到亮色主题' : '切换到暗色主题'"
        type="primary"
        @click="toggleTheme"
      />
    </view>
  </view>
</template>

<script setup>
import { useTheme } from "@/hooks"
import { useAppStore } from "@/store"
import { useTheme } from "@/hooks";
import { useAppStore } from "@/store";

const { theme, isDark, setTheme, toggleTheme } = useTheme()
const { theme, isDark, setTheme, toggleTheme } = useTheme();

const appStore = useAppStore()
const themeClass = computed(() => `theme-${appStore.theme}`)
const appStore = useAppStore();
const themeClass = computed(() => `theme-${appStore.theme}`);

// 主题选项
const themeOptions = [
@@ -90,14 +88,13 @@
    label: "亮色主题",
    value: "light",
    icon: "i-mdi-white-balance-sunny",
    description: "适合明亮环境使用"
    description: "适合明亮环境使用",
  },
  {
    label: "暗色主题",
    value: "dark",
    icon: "i-mdi-moon-and-stars",
    description: "适合暗光环境使用"
  }
]

    description: "适合暗光环境使用",
  },
];
</script>