style: replace legacy padding classes with inline pixel values

Remove the unused padding.scss stylesheet and its import from the main SCSS entrypoint. Update all legacy padding utility class names across every Vue component to use inline pixel-based utility classes (such as replacing `pl-12` with `pl-[12px]`). Also clean up extraneous whitespace and line breaks in component templates for improved readability.
2026-07-24 16:36:44 +08:00
parent e57617d2c6
commit 79b101978a
50 changed files with 247 additions and 703 deletions
--- a/src/pages/ChatMain/ChatCardOther/index.vue
+++ b/src/pages/ChatMain/ChatCardOther/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="w-full border-box flex flex-col overflow-hidden pl-12 mt-6 mb-6">
+  <view class="w-full border-box flex flex-col overflow-hidden pl-[12px] mt-6 mb-6">
    <text class="font-size-14 color-333">{{ text }}</text>
    <slot></slot>
  </view>
--- a/src/pages/ChatMain/ChatLongAnswer/index.vue
+++ b/src/pages/ChatMain/ChatLongAnswer/index.vue
@@ -6,8 +6,10 @@
    </view>

    <!-- ✅ 滚动区域 -->
-    <scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
-      <view class="flex flex-col pt-12 px-16 pb-24 border-box gap-10">
+    <scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId"
+      scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd">
+      <view class="flex flex-col pt-[12px] px-[16px] pb-[24px] border-box gap-10">
        <template v-if="hasStructuredLongTextData">
          <view v-if="headerSections.title || headerSections.tag" class="long-answer-header">
            <view v-if="headerSections.title" class="long-answer-title">
@@ -19,14 +21,10 @@
          </view>

          <template v-for="section in contentSections" :key="section.contentKey">
-            <LongAnswerSectionSkeleton
-              v-if="shouldRenderSectionSkeleton(section)"
-            />
+            <LongAnswerSectionSkeleton v-if="shouldRenderSectionSkeleton(section)" />

-            <ParsedValueView v-else-if="shouldUseParsedValueView(section)"
-              :field-key="section.contentKey"
-              :value="section.parsedValue !== null ? section.parsedValue : section.contentValue"
-            />
+            <ParsedValueView v-else-if="shouldUseParsedValueView(section)" :field-key="section.contentKey"
+              :value="section.parsedValue !== null ? section.parsedValue : section.contentValue" />

            <ChatMarkdown v-else :text="section.contentValue" />
          </template>
@@ -197,11 +195,11 @@ const computeTitle = (text = "") => {
 const onScroll = (e) => {
  try {
    const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};
-    
+
    // 计算距离底部的距离（使用准确的 scroll-view 高度）
    const viewHeight = scrollViewHeight.value;
    const distanceToBottom = scrollHeight - scrollTop - viewHeight;
-    
+
    // 判断是否在底部附近（允许 SCROLL_THRESHOLD 的误差范围）
    // 注意：只更新 isNearBottom，不在滚动时强制改变 userInteracting
    const atBottom = distanceToBottom <= SCROLL_THRESHOLD;
@@ -279,11 +277,11 @@ onLoad(({ message = "", streamId = "", finished = "0", tagToneColor = "" }) => {
        nextTick(() => {
          // 每次接收数据都重新测量高度（content size 可能变化，比如加载图）
          measureScrollViewHeight();
-          
+
          // 流式完成时强制滚动到底部
          if (finished) {
            scrollToBottom();
-          } 
+          }
          // 流式中的数据更新：只有在用户未交互且接近底部时才自动滚动
          else if (!userInteracting.value && isNearBottom.value) {
            scrollToBottom();
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -22,8 +22,8 @@

    <view v-show="tabIndex === 0" class="discovery-shell flex-full" @touchstart.capture="handleDiscoveryPanelTouchStart"
      @touchstart="handleDiscoveryPanelTouchStart" @touchmove.capture="handleDiscoveryPanelTouchMove"
-      @touchmove="handleDiscoveryPanelTouchMove"
-      @touchend="handleDiscoveryPanelTouchEnd" @touchcancel="handleDiscoveryPanelTouchEnd">
+      @touchmove="handleDiscoveryPanelTouchMove" @touchend="handleDiscoveryPanelTouchEnd"
+      @touchcancel="handleDiscoveryPanelTouchEnd">
      <view class="home-welcome-panel">
        <HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
      </view>
@@ -138,7 +138,7 @@
    </scroll-view>

    <!-- 输入框区域 -->
-    <view class="pb-safe-area">
+    <view class="pb-[20px]">
      <ChatQuickAccess />
      <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
        :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"
--- a/src/pages/ChatMain/ChatTopNavBar/index.vue
+++ b/src/pages/ChatMain/ChatTopNavBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="border-box h-44 flex flex-items-center pl-12 pr-12" :style="navBarStyle">
+  <view class="border-box h-44 flex flex-items-center pl-[12px] pr-[12px]" :style="navBarStyle">
    <view class="nav-icon-button" @tap.stop="showDrawer">
      <uni-icons type="bars" size="24" color="#ffffff" />
    </view>
--- a/src/pages/ChatMain/ChatTopWelcome/index.vue
+++ b/src/pages/ChatMain/ChatTopWelcome/index.vue
@@ -1,8 +1,8 @@
 v
 <template>
-  <view class="welcome-content border-box p-12">
+  <view class="welcome-content border-box p-[12px]">
    <view class="wrap rounded-20">
-      <view class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
+      <view class="flex flex-items-center flex-justify-between border-box pl-[12px] pr-[12px]">
        <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
          :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
          :displayWidth="spriteStyle.displayWidth" :fps="16" />
--- a/src/pages/ChatMain/NoticeMessage/detail.vue
+++ b/src/pages/ChatMain/NoticeMessage/detail.vue
@@ -6,11 +6,11 @@
    </view>

    <!-- ✅ 滚动区域 -->
-    <scroll-view class="flex-full overflow-hidden" scroll-y >
-      <view class="pb-24 border-box overflow-hidden">
+    <scroll-view class="flex-full overflow-hidden" scroll-y>
+      <view class="pb-[24px] border-box overflow-hidden">
        <image v-if="coverImage" class="w-full h-auto block" :src="coverImage" mode="widthFix" />

-        <view class="pt-16 px-12 pb-24 border-box">
+        <view class="pt-[16px] px-[12px] pb-[24px] border-box">
          <view class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</view>

          <view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
@@ -18,7 +18,7 @@
            <text class="color-171717 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</text>
          </view>

-          <view class="mt-20 pt-16 color-666 font-size-14 line-height-20 border-top">{{ noticeContent }}</view>
+          <view class="mt-20 pt-[16px] color-666 font-size-14 line-height-20 border-top">{{ noticeContent }}</view>
        </view>
      </view>
    </scroll-view>
@@ -61,7 +61,6 @@ onLoad((query = {}) => {
 </script>

 <style lang="scss" scoped>
-
 .notice-time-tag {
  display: inline-flex;
  height: 28px;
@@ -71,5 +70,4 @@ onLoad((query = {}) => {
  border-radius: 14px;
  box-sizing: border-box;
 }
-
 </style>