Skip to content

Commit

Permalink
feat(main): responsive layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@justorez
justorez committed Jan 14, 2024
1 parent 5205031 commit 052df73
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 130 deletions.
10 changes: 10 additions & 0 deletions src/assets/base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
margin: 0;
padding: 0;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,
Segoe UI,Roboto,Helvetica Neue,Vazirmatn,Arial,Noto Sans,sans-serif,
Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
overflow: hidden;
font-size: 100%;
}
239 changes: 127 additions & 112 deletions src/main/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,124 +119,138 @@ async function submit() {
}
</script>

<template id="tpl">
<!-- 帖子地址输入栏 -->
<div class="mb-5 flex w-1/2">
<input
v-model="url"
class="input-box"
type="text"
placeholder="请输入帖子地址"
/>
<button
class="btn btn-success text-white ml-2"
:disabled="initBtnLoading"
@click="init"
>
<span v-show="initBtnLoading" class="loading loading-spinner"></span>
解析
</button>
</div>

<!-- 搜索和工具栏 -->
<Transition name="fade-down">
<div
v-if="totalPage"
class="mb-5 flex w-1/2"
>
<template>
<div class="main w-full h-full m-auto flex flex-col items-center">
<!-- 帖子地址输入栏 -->
<div class="mb-5 flex">
<input
v-model="keyword"
v-model="url"
class="input-box"
type="search"
placeholder="搜索用户和评论，多个关键字空格隔开"
title="多个关键字空格隔开，用户名全文匹配，评论模糊匹配"
type="text"
placeholder="请输入帖子地址"
/>
<select v-model="myReasonId" class="w-1/3 ml-2 opacity-100 rounded-md border-0 p-2 text-gray-600 outline-none ring-1 ring-inset ring-gray-300 focus:ring-green-500">
<option class="text-gray-400" value="" disabled selected>请选择举报原因</option>
<template v-for="reason in reasons">
<optgroup v-if="reason.subs" :key="reason.name" :label="reason.name">
<option
v-for="item in reason.subs"
:key="item.id"
:value="item.id"
>{{ item.name }}</option>
</optgroup>
<option
v-else
:key="reason.id"
:value="reason.id"
>{{ reason.name }}</option>
</template>
</select>
<button
:id="progress.total ? 'reporting' : ''"
class="btn btn-success text-white w-1/4 ml-2"
@click="submit"
<button
class="btn btn-success text-white ml-2"
:disabled="initBtnLoading"
@click="init"
>
{{ reportButtonText }}

<!-- 举报进度条 -->
<template v-if="progress.total">
<span :style="{ width: progressPercent }"></span>
<span>{{ `举报中：${progress.done}/${progress.total}` }}</span>
</template>
<span v-show="initBtnLoading" class="loading loading-spinner"></span>
解析
</button>
</div>
</Transition>

<!-- 分页 -->
<div class="w-1/2 mb-1">
<button
v-for="i in totalPage"
:key="i"
:title="`第${i}页`"
class="btn btn-sm btn-square mr-3 mb-3 text-gray-500"
:class="{'btn-success text-white': currentPage === i}"
@click="goPage(i)"
>
{{ i }}
</button>
</div>
<!-- 搜索和工具栏 -->
<Transition name="fade-down">
<div
v-if="totalPage"
class="mb-5 flex"
>
<input
v-model="keyword"
class="input-box"
type="search"
placeholder="搜索用户和评论，多个关键字空格隔开"
title="用户名请输入全文，评论可模糊搜索"
/>
<select
v-model="myReasonId"
class="ml-2 opacity-100 rounded-md border-0 p-2 text-gray-600 outline-none ring-1 ring-inset ring-gray-300 focus:ring-green-500"
style="width: 30%;"
>
<option class="text-gray-400" value="" disabled selected>请选择举报原因</option>
<template v-for="reason in reasons">
<optgroup v-if="reason.subs" :key="reason.name" :label="reason.name">
<option
v-for="item in reason.subs"
:key="item.id"
:value="item.id"
>{{ item.name }}</option>
</optgroup>
<option
v-else
:key="reason.id"
:value="reason.id"
>{{ reason.name }}</option>
</template>
</select>
<button
:id="progress.total ? 'reporting' : ''"
class="btn btn-success text-white w-1/4 ml-2"
@click="submit"
>
{{ reportButtonText }}

<!-- 评论列表 -->
<div
v-if="totalPage"
class="w-1/2 flex border-b border-black font-black pb-1"
>
<span class="w-1/4">用户名</span>
<span class="flex-1">评论内容</span>
</div>
<div class="w-1/2 pt-2 pb-5 flex-1 overflow-y-auto">
<!-- 举报进度条 -->
<template v-if="progress.total">
<span :style="{ width: progressPercent }"></span>
<span>{{ `举报中：${progress.done}/${progress.total}` }}</span>
</template>
</button>
</div>
</Transition>

<!-- 分页 -->
<div class="mb-1">
<button
v-for="i in totalPage"
:key="i"
:title="`第${i}页`"
class="btn btn-sm btn-square mr-3 mb-3 text-gray-500"
:class="{'btn-success text-white': currentPage === i}"
@click="goPage(i)"
>
{{ i }}
</button>
</div>

<!-- 评论列表 -->
<div
v-for="cmt in list"
:key="cmt.id"
class="mb-1 flex"
v-if="totalPage"
class="flex border-b border-black font-black pb-1"
>
<a
class="text-green-600 hover:underline w-1/4 flex-shrink-0"
:href="cmt.profile"
target="_blank"
<span class="w-1/4">用户名</span>
<span class="flex-1">评论内容</span>
</div>
<div class="pt-2 pb-5 flex-1 overflow-y-auto">
<div
v-for="cmt in list"
:key="cmt.id"
class="mb-1 flex"
>
{{ cmt.username }}
</a>
<span class="flex-1 text-gray-700">
<a
v-if="cmt.img"
:href="cmt.img"
class="text-green-600 hover:underline w-1/4 flex-shrink-0"
:href="cmt.profile"
target="_blank"
class="text-blue-500 hover:underline mr-1"
>
[ 点击查看评论图片 ]
{{ cmt.username }}
</a>
<span class="break-words">{{ cmt.content }}</span>
</span>
<span class="flex-1 text-gray-700">
<a
v-if="cmt.img"
:href="cmt.img"
target="_blank"
class="text-blue-500 hover:underline mr-1"
>
[ 点击查看评论图片 ]
</a>
<span class="break-words">{{ cmt.content }}</span>
</span>
</div>
</div>
</div>
</template>

<style scoped>
<style lang="scss" scoped>
.input-box {
@apply input input-bordered focus:outline-none flex-1 focus:border-green-500;
@apply input input-bordered flex-1 focus:outline-none focus:border-green-500;
}
.main {
max-width: 750px;
> div {
width: 100%;
}
}
.fade-down-enter-active,
Expand All @@ -254,19 +268,20 @@ async function submit() {
border-color: #dcdde1;
background-color: #dcdde1;
overflow: hidden;
}
#reporting span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 1;
background-color: #1cad70;
transition: all .5s;
}
#reporting span:nth-child(2) {
position: relative;
z-index: 5;
transition: all .5s;
span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 1;
background-color: #1cad70;
transition: all .5s;
}
span:nth-child(2) {
position: relative;
z-index: 5;
transition: all .5s;
}
}
</style>
12 changes: 1 addition & 11 deletions src/main/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
body {
margin: 0;
padding: 0;
font-family: system-ui,-apple-system,'Segoe UI',Roboto,
Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
overflow: hidden;
font-size: 100%;
font-size: 16px;
}

#app {
@apply h-screen p-5 pb-0 bg-gray-50 overflow-hidden flex flex-col items-center;
@apply h-screen p-5 pb-0 bg-gray-50 overflow-hidden;
}
2 changes: 1 addition & 1 deletion src/main/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createApp } from 'vue'
import App from './app.vue'
import '../assets/base.scss'
import './index.scss'
import App from './app.vue'

createApp(App).mount('#app')

Expand Down
3 changes: 0 additions & 3 deletions src/popup/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
body {
width: 140px;
margin: 0;
padding: 10px;
font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
padding: 10px;
color: #2c3e50;
}
7 changes: 4 additions & 3 deletions src/popup/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ createApp(App).mount('#app')
if (tab && tab.url?.includes('douban.com/group/topic/')) {
chrome.storage.local.set({ tabUrl: tab.url })
}
window.open(
chrome.runtime.getURL('src/main/index.html')
)
chrome.tabs.create({
active: true,
url: chrome.runtime.getURL('src/main/index.html')
})
}
})()

Expand Down

0 comments on commit 052df73

Please sign in to comment.