ow

uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue

@@ -6,6 +6,7 @@
  */
 import { useLocale } from "uview-pro";
 import { computed } from "vue";
+import { useThemeTokens } from "@/composables";
 
 interface AddAction {
   key: string;
@@ -29,6 +30,8 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useLocale();
+// 行图标随主题（与文件夹图形同一 primary 派生）
+const { primary } = useThemeTokens();
 
 // computed：切换语言后文案跟随重算（tab 页组件实例常驻，setup 只跑一次）
 const actions = computed<AddAction[]>(() => [
@@ -45,9 +48,18 @@ const actions = computed<AddAction[]>(() => [
         {{ t("FilePage.addTitle") }}
       </text>
       <view v-for="action in actions" :key="action.key" class="file-add-sheet__row" @tap="emit('action', action.key)">
-        <u-icon :name="action.icon" size="40" color="#2b8fff" />
-        <text class="file-add-sheet__row-text">
-          {{ action.label }}
+        <view class="file-add-sheet__row-main">
+          <u-icon :name="action.icon" size="40" :color="primary" />
+          <text class="file-add-sheet__row-text">
+            {{ action.label }}
+          </text>
+        </view>
+        <u-icon name="arrow-right" size="26" color="#c0c4cc" />
+      </view>
+      <!-- 取消通栏（底部抽屉统一风格） -->
+      <view class="file-add-sheet__cancel" @tap="emit('close')">
+        <text class="file-add-sheet__cancel-text">
+          {{ t("FilePage.folderCancel") }}
         </text>
       </view>
       <view class="file-add-sheet__safe" />
@@ -56,13 +68,14 @@ const actions = computed<AddAction[]>(() => [
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡行 */
 .file-add-sheet {
-  padding: 40rpx 32rpx 0;
-  background-color: #ffffff;
+  padding: 32rpx 24rpx 0;
+  background-color: #f2f3f5;
 
   &__title {
     display: block;
-    padding: 0 8rpx 24rpx;
+    padding: 8rpx 8rpx 24rpx;
     font-size: 26rpx;
     color: #8f959e;
   }
@@ -70,11 +83,18 @@ const actions = computed<AddAction[]>(() => [
   &__row {
     display: flex;
     align-items: center;
-    gap: 24rpx;
-    margin-bottom: 16rpx;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
     padding: 30rpx 32rpx;
     border-radius: 20rpx;
-    background-color: #f5f6f8;
+    background-color: #ffffff;
+  }
+
+  &__row-main {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    min-width: 0;
   }
 
   &__row-text {
@@ -82,6 +102,21 @@ const actions = computed<AddAction[]>(() => [
     color: #1f2329;
   }
 
+  &__cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8rpx;
+    padding: 26rpx 0;
+    border-radius: 20rpx;
+    background-color: #ffffff;
+  }
+
+  &__cancel-text {
+    font-size: 28rpx;
+    color: #5c626b;
+  }
+
   /* 底部留白：贴屏安全区（H5 无 env 时也有 32rpx 呼吸） */
   &__safe {
     height: calc(32rpx + env(safe-area-inset-bottom));