💄 调整UI

2026-04-03 06:55:06 +08:00 · 2025-03-12 15:51:39 +08:00
parent 577f86248e
commit f842975f21
11 changed files with 137 additions and 88 deletions
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -15,7 +15,12 @@
      <div class="tpc-title" :title="card.title" @click="shareCard">{{ card.title }}</div>
    </div>
    <div class="tpc-mid" v-if="card.user !== null">
-      <TpAvatar :data="card.user" position="left" @click="onUserClick()" />
+      <TpAvatar
+        :data="card.user"
+        position="left"
+        :style="{ cursor: props.userClick ? 'pointer' : 'default' }"
+        @click="onUserClick()"
+      />
    </div>
    <div class="tpc-bottom" v-if="card.data !== null">
      <div class="tpc-tags">
@@ -290,9 +295,11 @@ function onUserClick(): void {

 .tpc-mid {
  position: relative;
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
  padding: 0 10px;
-  cursor: v-bind("props.userClick ? 'pointer' : 'default'");
+  margin-right: auto;
 }

 .tpc-bottom {
@@ -317,6 +324,8 @@ function onUserClick(): void {

 .tpc-tags {
  display: flex;
+  width: fit-content;
+  max-width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
@@ -401,11 +410,13 @@ function onUserClick(): void {

 .tpc-data {
  display: flex;
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
  height: 20px;
  align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
  padding: 4px;
+  margin-left: auto;
  column-gap: 8px;
 }

--- a/src/components/viewPost/tp-avatar.vue
+++ b/src/components/viewPost/tp-avatar.vue
@@ -78,7 +78,7 @@ const levelColor = computed<string>(() => {
  width: 100%;
  max-width: 100%;
  height: 26px;
-  border-top: 2px solid var(--common-shadow-2);
+  border-top: 1px dotted var(--common-shadow-4);
  font-size: 14px;
  opacity: 0.7;
  text-align: v-bind("props.position");
--- a/src/components/viewPost/tp-image.vue
+++ b/src/components/viewPost/tp-image.vue
@@ -103,14 +103,14 @@ function getImageTitle(): string {
  display: flex;
  align-items: center;
  justify-content: center;
-  margin: 10px auto;
+  margin: 8px auto;
 }

 .tp-image-box img {
  width: v-bind(imgWidth);
  max-width: 100%;
  height: auto;
-  border-radius: 10px;
+  border-radius: 4px;
  cursor: pointer;
 }

@@ -118,14 +118,14 @@ function getImageTitle(): string {
  display: flex;
  align-items: center;
  justify-content: center;
-  margin: 10px auto;
-  column-gap: 5px;
+  margin: 8px auto;
+  column-gap: 4px;
 }

 .act {
  position: absolute;
-  right: 5px;
-  bottom: 5px;
+  right: 4px;
+  bottom: 4px;
  display: flex;
  width: 25px;
  height: 25px;
@@ -134,7 +134,7 @@ function getImageTitle(): string {
  justify-content: center;
  border-radius: 50%;
  background: var(--tgc-od-white);
-  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  box-shadow: 0 0 4px rgb(0 0 0 / 50%);
  cursor: pointer;
 }
 </style>
--- a/src/components/viewPost/tp-linkCard.vue
+++ b/src/components/viewPost/tp-linkCard.vue
@@ -69,18 +69,19 @@ async function toLink(): Promise<void> {
 .tp-link-card-box {
  display: flex;
  width: 100%;
-  padding: 10px;
+  box-sizing: border-box;
+  padding: 8px;
  border: 1px solid var(--common-shadow-1);
-  border-radius: 10px;
-  margin-bottom: 10px;
+  border-radius: 4px;
+  margin-bottom: 8px;
  background: var(--app-side-bg);
-  column-gap: 10px;
+  column-gap: 8px;
 }

 .tp-link-card-box img {
  max-width: 50%;
  max-height: 180px;
-  border-radius: 10px;
+  border-radius: 4px;
  cursor: pointer;
  transition: all 0.5s;
 }
--- a/src/components/viewPost/tp-text.vue
+++ b/src/components/viewPost/tp-text.vue
@@ -148,12 +148,12 @@ function getEmojiName(): string {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
-  transform: translateY(5px);
+  margin: 0 4px;
+  transform: translateY(2px);
 }

 .tp-text-emoji img {
-  width: 45px;
-  height: 45px;
-  margin: 0 5px;
+  height: 32px;
+  object-fit: contain;
 }
 </style>
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -22,7 +22,7 @@
      </template>
      <div class="tpr-main-reply">
        <div class="tpr-main-filter">
-          <v-chip color="primary" label @click="handleDebug">回复列表</v-chip>
+          <div class="tpr-title" @click="handleDebug">回复列表</div>
          <v-switch
            v-model="onlyLz"
            color="primary"
@@ -39,7 +39,7 @@
            item-value="value"
            title="排序方式"
          />
-          <v-btn @click="showOverlay = false" icon="mdi-close" class="tpr-btn-close" size="small" />
+          <v-btn @click="showOverlay = false" icon="mdi-close" class="tpr-btn-close" size="32" />
        </div>
        <v-list class="tpr-reply-list">
          <VpReplyItem
@@ -176,7 +176,8 @@ async function handleDebug(): Promise<void> {
 }

 .tpr-btn-close {
-  border: 1px solid var(--common-shadow-4);
+  border: 1px solid var(--common-shadow-2);
+  margin-left: auto;
  background: var(--tgc-btn-1);
  color: var(--btn-text);
 }
@@ -186,16 +187,17 @@ async function handleDebug(): Promise<void> {
  display: flex;
  width: 300px;
  height: 400px;
+  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
-  padding: 5px;
+  padding: 8px;
  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
+  border-radius: 4px;
  background: var(--app-page-bg);
-  box-shadow: 5px 5px 8px var(--common-shadow-4);
+  box-shadow: 2px 2px 8px var(--common-shadow-4);
  overflow-y: auto;
-  row-gap: 10px;
+  row-gap: 8px;
 }

 .tpr-main-filter {
@@ -203,12 +205,25 @@ async function handleDebug(): Promise<void> {
  width: 100%;
  height: 40px;
  align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
  color: var(--app-page-content);
-  column-gap: 10px;
+  column-gap: 4px;
+}
+
+.tpr-title {
+  position: relative;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background: var(--tgc-od-blue);
+  color: var(--tgc-white-1);
+  cursor: pointer;
+  font-family: var(--font-title);
+  white-space: nowrap;
 }

 .tpr-select {
+  position: relative;
+  max-width: 100px;
  height: 40px;
  font-size: 12px;
 }
@@ -218,13 +233,15 @@ async function handleDebug(): Promise<void> {
  display: flex;
  width: 100%;
  height: 360px;
+  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
-  padding: 0 5px;
+  padding-top: 0;
+  padding-right: 4px;
  background: var(--app-page-bg);
-  overflow-y: auto;
-  row-gap: 5px;
+  overflow: hidden auto;
+  row-gap: 8px;
 }

 .tpr-list-item {
--- a/src/components/viewPost/vp-overlay-image.vue
+++ b/src/components/viewPost/vp-overlay-image.vue
@@ -101,7 +101,7 @@ async function onDownload(): Promise<void> {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
-  row-gap: 20px;
+  row-gap: 12px;
  transition: all 0.5s;
 }

@@ -110,9 +110,11 @@ async function onDownload(): Promise<void> {
  display: flex;
  width: 100%;
  max-height: 70%;
+  box-sizing: border-box;
  align-items: flex-start;
  justify-content: center;
-  border-radius: 10px;
+  border: 1px solid var(--tgc-od-white);
+  border-radius: 4px;
  background: v-bind("bgMode === 1 ? 'black' : bgMode === 2 ? 'white' : 'transparent'");
  cursor: zoom-in;
  overflow-y: auto;
@@ -129,7 +131,7 @@ async function onDownload(): Promise<void> {
 .tpoi-top img {
  max-width: 100%;
  max-height: 100%;
-  border-radius: 10px;
+  border-radius: 4px;
  object-fit: contain;
 }

@@ -138,23 +140,25 @@ async function onDownload(): Promise<void> {
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
-  gap: 10px;
+  gap: 8px;
 }

 .tpoi-info {
-  padding: 10px;
-  border-radius: 10px;
+  padding: 8px;
+  border: 1px solid var(--tgc-od-white);
+  border-radius: 4px;
  background-color: var(--common-shadow-2);
  color: white;
 }

 .tpoi-tools {
  display: flex;
-  padding: 10px;
-  border-radius: 10px;
+  padding: 8px;
+  border: 1px solid var(--tgc-od-white);
+  border-radius: 4px;
  background-color: var(--common-shadow-2);
  color: white;
-  gap: 10px;
+  gap: 4px;
 }

 .tpoi-tools v-icon {
--- a/src/components/viewPost/vp-reply-item.vue
+++ b/src/components/viewPost/vp-reply-item.vue
@@ -71,6 +71,9 @@
      </div>
    </div>
    <div class="tpr-extra" :title="`ID:${props.modelValue.reply.reply_id}`">
+      <div class="tpr-share" @click="share" data-html2canvas-ignore title="分享">
+        <v-icon size="small">mdi-share-variant</v-icon>
+      </div>
      <span
        class="tpr-pin"
        v-if="props.mode === 'main' && props.modelValue.reply.reply_id === props.pinId"
@@ -89,9 +92,6 @@
        {{ props.modelValue.reply.floor_id }}F
      </span>
    </div>
-    <div class="tpr-share" @click="share" data-html2canvas-ignore title="分享">
-      <v-icon size="small">mdi-share-variant</v-icon>
-    </div>
    <div class="tpr-share-info bottom">
      <span>{{ props.modelValue.reply.post_id }}</span>
      <span v-if="props.mode === 'sub'"> | {{ props.modelValue.reply.floor_id }}F</span>
@@ -237,14 +237,14 @@ async function handleUser(): Promise<void> {
  position: relative;
  display: flex;
  width: 100%;
+  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
-  padding: 5px;
+  padding: 8px;
  border: 1px solid var(--common-shadow-1);
-  border-radius: 5px;
+  border-radius: 4px;
  background: var(--box-bg-1);
-  row-gap: 5px;
  word-break: break-all;
 }

@@ -265,12 +265,11 @@ async function handleUser(): Promise<void> {
 .tpr-user {
  position: relative;
  display: flex;
-  width: 100%;
+  max-width: 100%;
  height: 40px;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
-  gap: 5px;
 }

 .tpru-left {
@@ -331,7 +330,7 @@ async function handleUser(): Promise<void> {
  overflow: hidden;
  align-items: center;
  justify-content: center;
-  column-gap: 5px;
+  column-gap: 4px;
  font-family: var(--font-title);
  font-size: 16px;
  text-overflow: ellipsis;
@@ -350,17 +349,19 @@ async function handleUser(): Promise<void> {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--tgc-od-blue);
+  color: var(--tgc-white-1);
  font-size: 12px;
 }

 .tpr-content {
-  width: 100%;
+  position: relative;
+  max-width: 100%;
 }

 .tpr-info {
  display: flex;
  width: 100%;
-  align-items: center;
+  align-items: flex-end;
  justify-content: space-between;
  opacity: 0.5;
 }
@@ -369,21 +370,22 @@ async function handleUser(): Promise<void> {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 5px;
+  font-size: 12px;
+  gap: 4px;
 }

 .tpri-right {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 5px;
+  gap: 4px;
 }

 .tpr-like {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 5px;
+  gap: 4px;
 }

 .tpr-reply {
@@ -391,7 +393,7 @@ async function handleUser(): Promise<void> {
  align-items: center;
  justify-content: center;
  cursor: pointer;
-  gap: 5px;
+  gap: 4px;
 }

 .tpr-extra {
@@ -400,7 +402,7 @@ async function handleUser(): Promise<void> {
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
-  gap: 5px;
+  gap: 4px;
 }

 .tpr-pin {
@@ -422,7 +424,7 @@ async function handleUser(): Promise<void> {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 5px;
+  gap: 4px;
  opacity: 0.3;

  :last-child {
@@ -442,21 +444,24 @@ async function handleUser(): Promise<void> {
 .tpr-reply-sub {
  position: relative;
  display: flex;
-  width: 100%;
-  max-height: 360px;
+  width: 300px;
+  max-height: 400px;
+  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
-  padding: 5px;
+  padding: 8px;
+  border-radius: 4px;
  background: var(--app-page-bg);
  overflow-y: auto;
-  row-gap: 5px;
+  row-gap: 8px;
+
+  &.v-list {
+    box-shadow: -4px 0 8px var(--common-shadow-4);
+  }
 }

 .tpr-share {
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
  cursor: pointer;
  opacity: 0.3;
 }
@@ -469,17 +474,17 @@ async function handleUser(): Promise<void> {
  justify-content: center;
  color: var(--tgc-od-white);
  font-size: 12px;
-  gap: 5px;
+  gap: 4px;
  text-shadow: 1px 1px 1px var(--tgc-dark-1);
 }

 .tpr-share-info.top {
  top: 0;
-  right: 5px;
+  right: 4px;
 }

 .tpr-share-info.bottom {
-  bottom: 5px;
-  left: 5px;
+  bottom: 4px;
+  left: 4px;
 }
 </style>
--- a/src/utils/TGShare.ts
+++ b/src/utils/TGShare.ts
@@ -165,7 +165,6 @@ export async function copyToClipboard(buffer: Uint8Array): Promise<void> {
  const url = URL.createObjectURL(blob);
  // todo mac 会报错: https://bugs.webkit.org/show_bug.cgi?id=222262
  if (platform() === "macos") {
-    // todo 待测试
    navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]).then(
      () => URL.revokeObjectURL(url),
      (err) => TGLogger.Error(`[copyToClipboard] 复制到剪贴板失败: ${err}`),
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -49,6 +49,7 @@
        @click="handleUser(postData.user)"
      />
    </div>
+    <div class="tp-post-divider" />
    <div class="tp-post-title" @click="toPost()">
      <span class="mpt-official" v-if="postData.post.post_status.is_official">官</span>
      <span>{{ postData.post.subject }}</span>
@@ -367,18 +368,18 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  align-items: center;
  justify-content: start;
  color: var(--common-text-title);
+  column-gap: 4px;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 20px;
 }

 .mpt-official {
-  display: inline-block;
-  width: 24px;
+  position: relative;
  align-items: center;
  justify-content: center;
-  border-radius: 5px;
-  margin-right: 2px;
+  padding: 0 4px;
+  border-radius: 4px;
  background: var(--common-shadow-1);
  color: var(--box-text-5);
  font-size: 16px;
@@ -387,10 +388,12 @@ function handleUser(user: TGApp.BBS.Post.User): void {

 /* subtitle */
 .tp-post-subtitle {
+  position: relative;
  display: flex;
+  width: fit-content;
  align-items: center;
  justify-content: flex-start;
-  column-gap: 10px;
+  column-gap: 8px;
  font-size: 16px;
  opacity: 0.6;
 }
@@ -400,7 +403,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  align-items: center;
  justify-content: center;
  color: var(--common-text-title);
-  column-gap: 5px;
+  column-gap: 4px;
  font-family: var(--font-title);
 }

@@ -410,9 +413,17 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  display: flex;
  align-items: end;
  justify-content: space-between;
-  padding-bottom: 10px;
-  border-bottom: 1px dashed var(--common-shadow-2);
-  margin-bottom: 10px;
+}
+
+.tp-post-divider {
+  position: relative;
+  width: 100%;
+  height: 1px;
+  box-sizing: border-box;
+  border: 1px dashed var(--common-shadow-2);
+  border-radius: 1px;
+  margin: 8px 0;
+  background: transparent;
 }

 .tp-post-version {
@@ -431,7 +442,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  align-items: center;
  justify-content: start;
  color: var(--box-text-4);
-  column-gap: 10px;
+  column-gap: 8px;
  font-size: 14px;
 }

@@ -462,7 +473,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-left: 10px;
  column-gap: 2px;
  opacity: 0.8;

@@ -473,11 +483,14 @@ function handleUser(user: TGApp.BBS.Post.User): void {

 /* extra */
 .tp-post-extra {
+  position: relative;
  display: flex;
+  width: fit-content;
+  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
-  gap: 5px 10px;
+  gap: 4px 8px;
 }

 /* collection */
@@ -485,11 +498,11 @@ function handleUser(user: TGApp.BBS.Post.User): void {
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 0 5px;
+  padding: 0 4px;
  border: 1px solid var(--common-shadow-2);
-  border-radius: 5px;
+  border-radius: 4px;
  color: var(--box-text-3);
-  column-gap: 5px;
+  column-gap: 4px;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 12px;
--- a/src/web/utils/annoParser.ts
+++ b/src/web/utils/annoParser.ts
@@ -262,7 +262,6 @@ function parseAnnoSpan(span: HTMLElement, attr?: Record<string, string>): TGApp.
    }
    return { insert: parse, attributes: spanAttrs };
  }
-  // todo 优化处理
  return { insert: span.textContent ?? "", attributes: spanAttrs };
 }