aClientTable.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. {{define "component/aClientTable"}}
  2. <template slot="actions" slot-scope="text, client, index">
  3. <a-tooltip>
  4. <template slot="title">{{ i18n "qrCode" }}</template>
  5. <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
  6. </a-tooltip>
  7. <a-tooltip>
  8. <template slot="title">{{ i18n "pages.client.edit" }}</template>
  9. <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
  10. </a-tooltip>
  11. <a-tooltip>
  12. <template slot="title">{{ i18n "info" }}</template>
  13. <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
  14. </a-tooltip>
  15. <a-tooltip>
  16. <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
  17. <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)" title='{{ i18n "pages.inbounds.resetTrafficContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}' cancel-text='{{ i18n "cancel"}}'>
  18. <a-icon slot="icon" type="question-circle-o" :style="{ color: 'var(--color-primary-100)'}"></a-icon>
  19. <a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
  20. </a-popconfirm>
  21. </a-tooltip>
  22. <a-tooltip>
  23. <template slot="title">
  24. <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
  25. </template>
  26. <a-popconfirm @confirm="delClient(record.id,client,false)" title='{{ i18n "pages.inbounds.deleteClientContent"}}' :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "delete"}}' ok-type="danger" cancel-text='{{ i18n "cancel"}}'>
  27. <a-icon slot="icon" type="question-circle-o" :style="{ color: '#e04141' }"></a-icon>
  28. <a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
  29. </a-popconfirm>
  30. </a-tooltip>
  31. </template>
  32. <template slot="enable" slot-scope="text, client, index">
  33. <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
  34. </template>
  35. <template slot="online" slot-scope="text, client, index">
  36. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  37. <template slot="content" >
  38. {{ i18n "lastOnline" }}: [[ formatLastOnline(client.email) ]]
  39. </template>
  40. <template v-if="client.enable && isClientOnline(client.email)">
  41. <a-tag color="green">{{ i18n "online" }}</a-tag>
  42. </template>
  43. <template v-else>
  44. <a-tag>{{ i18n "offline" }}</a-tag>
  45. </template>
  46. </a-popover>
  47. </template>
  48. <template slot="client" slot-scope="text, client">
  49. <a-space direction="horizontal" :size="2">
  50. <a-tooltip>
  51. <template slot="title">
  52. <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
  53. <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
  54. <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
  55. </template>
  56. <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
  57. </a-tooltip>
  58. <a-space direction="vertical" :size="2">
  59. <span class="client-email">[[ client.email ]]</span>
  60. <template v-if="client.comment && client.comment.trim()">
  61. <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
  62. <template slot="title">
  63. [[ client.comment ]]
  64. </template>
  65. <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
  66. </a-tooltip>
  67. <span v-else class="client-comment">[[ client.comment ]]</span>
  68. </template>
  69. </a-space>
  70. </a-space>
  71. </template>
  72. <template slot="traffic" slot-scope="text, client">
  73. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  74. <template slot="content" v-if="client.email">
  75. <table cellpadding="2" width="100%">
  76. <tr>
  77. <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
  78. <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
  79. </tr>
  80. <tr v-if="client.totalGB > 0">
  81. <td>{{ i18n "remained" }}</td>
  82. <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
  83. </tr>
  84. </table>
  85. </template>
  86. <table>
  87. <tr class="tr-table-box">
  88. <td class="tr-table-rt"> [[ SizeFormatter.sizeFormat(getSumStats(record, client.email)) ]] </td>
  89. <td class="tr-table-bar" v-if="!client.enable">
  90. <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
  91. </td>
  92. <td class="tr-table-bar" v-else-if="client.totalGB > 0">
  93. <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
  94. </td>
  95. <td v-else class="infinite-bar tr-table-bar">
  96. <a-progress :show-info="false" :percent="100"></a-progress>
  97. </td>
  98. <td class="tr-table-lt">
  99. <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
  100. <span v-else class="tr-infinity-ch">&infin;</span>
  101. </td>
  102. </tr>
  103. </table>
  104. </a-popover>
  105. </template>
  106. <template slot="allTime" slot-scope="text, client">
  107. <a-tag>[[ SizeFormatter.sizeFormat(getAllTimeClient(record, client.email)) ]]</a-tag>
  108. </template>
  109. <template slot="expiryTime" slot-scope="text, client, index">
  110. <template v-if="client.expiryTime !=0 && client.reset >0">
  111. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  112. <template slot="content">
  113. <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
  114. </span>
  115. <span v-else>
  116. <template v-if="app.datepicker === 'gregorian'">
  117. [[ DateUtil.formatMillis(client._expiryTime) ]]
  118. </template>
  119. <template v-else>
  120. [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
  121. </template>
  122. </span>
  123. </template>
  124. <table>
  125. <tr class="tr-table-box">
  126. <td class="tr-table-rt"> [[ remainedDays(client.expiryTime) ]] </td>
  127. <td class="infinite-bar tr-table-bar">
  128. <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
  129. </td>
  130. <td class="tr-table-lt">[[ client.reset + "d" ]]</td>
  131. </tr>
  132. </table>
  133. </a-popover>
  134. </template>
  135. <template v-else>
  136. <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
  137. <template slot="content">
  138. <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
  139. </span>
  140. <span v-else>
  141. <template v-if="app.datepicker === 'gregorian'">
  142. [[ DateUtil.formatMillis(client._expiryTime) ]]
  143. </template>
  144. <template v-else>
  145. [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
  146. </template>
  147. </span>
  148. </template>
  149. <a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
  150. </a-popover>
  151. <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" :style="{ border: 'none' }" class="infinite-tag">
  152. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  153. <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
  154. </svg>
  155. </a-tag>
  156. </template>
  157. </template>
  158. <template slot="actionMenu" slot-scope="text, client, index">
  159. <a-dropdown :trigger="['click']">
  160. <a-icon @click="e => e.preventDefault()" type="ellipsis" :style="{ fontSize: '20px' }"></a-icon>
  161. <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
  162. <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
  163. <a-icon :style="{ fontSize: '14px' }" type="qrcode"></a-icon>
  164. {{ i18n "qrCode" }}
  165. </a-menu-item>
  166. <a-menu-item @click="openEditClient(record.id,client);">
  167. <a-icon :style="{ fontSize: '14px' }" type="edit"></a-icon>
  168. {{ i18n "pages.client.edit" }}
  169. </a-menu-item>
  170. <a-menu-item @click="showInfo(record.id,client);">
  171. <a-icon :style="{ fontSize: '14px' }" type="info-circle"></a-icon>
  172. {{ i18n "info" }}
  173. </a-menu-item>
  174. <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
  175. <a-icon :style="{ fontSize: '14px' }" type="retweet"></a-icon>
  176. {{ i18n "pages.inbounds.resetTraffic" }}
  177. </a-menu-item>
  178. <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
  179. <a-icon :style="{ fontSize: '14px' }" type="delete"></a-icon>
  180. <span :style="{ color: '#FF4D4F' }"> {{ i18n "delete"}}</span>
  181. </a-menu-item>
  182. <a-menu-item>
  183. <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)"></a-switch>
  184. {{ i18n "enable"}}
  185. </a-menu-item>
  186. </a-menu>
  187. </a-dropdown>
  188. </template>
  189. <template slot="info" slot-scope="text, client, index">
  190. <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
  191. <template slot="content">
  192. <table>
  193. <tr>
  194. <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
  195. </tr>
  196. <tr>
  197. <td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
  198. <td width="120px" v-if="!client.enable">
  199. <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
  200. </td>
  201. <td width="120px" v-else-if="client.totalGB > 0">
  202. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  203. <template slot="content" v-if="client.email">
  204. <table cellpadding="2" width="100%">
  205. <tr>
  206. <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
  207. <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
  208. </tr>
  209. <tr>
  210. <td>{{ i18n "remained" }}</td>
  211. <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
  212. </tr>
  213. </table>
  214. </template>
  215. <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
  216. </a-popover>
  217. </td>
  218. <td width="120px" v-else class="infinite-bar">
  219. <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'" :show-info="false" :percent="100"></a-progress>
  220. </td>
  221. <td width="80px">
  222. <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
  223. <span v-else class="tr-infinity-ch">&infin;</span>
  224. </td>
  225. </tr>
  226. <tr>
  227. <td colspan="3" :style="{ textAlign: 'center' }">
  228. <a-divider :style="{ margin: '0', borderCollapse: 'separate' }"></a-divider>
  229. {{ i18n "pages.inbounds.expireDate" }}
  230. </td>
  231. </tr>
  232. <tr>
  233. <template v-if="client.expiryTime !=0 && client.reset >0">
  234. <td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ remainedDays(client.expiryTime) ]] </td>
  235. <td width="120px" class="infinite-bar">
  236. <a-popover :overlay-class-name="themeSwitcher.currentTheme">
  237. <template slot="content">
  238. <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
  239. </span>
  240. <span v-else>
  241. <template v-if="app.datepicker === 'gregorian'">
  242. [[ DateUtil.formatMillis(client._expiryTime) ]]
  243. </template>
  244. <template v-else>
  245. [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
  246. </template>
  247. </span>
  248. </template>
  249. <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
  250. </a-popover>
  251. </td>
  252. <td width="60px">[[ client.reset + "d" ]]</td>
  253. </template>
  254. <template v-else>
  255. <td colspan="3" :style="{ textAlign: 'center' }">
  256. <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
  257. <template slot="content">
  258. <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}
  259. </span>
  260. <span v-else>
  261. <template v-if="app.datepicker === 'gregorian'">
  262. [[ DateUtil.formatMillis(client._expiryTime) ]]
  263. </template>
  264. <template v-else>
  265. [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
  266. </template>
  267. </span>
  268. </template>
  269. <a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
  270. </a-popover>
  271. <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
  272. <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
  273. <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
  274. </svg>
  275. </a-tag>
  276. </template>
  277. </td>
  278. </tr>
  279. </table>
  280. </template>
  281. <a-badge>
  282. <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
  283. <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
  284. <a-icon type="solution"></a-icon>
  285. </a-button>
  286. </a-badge>
  287. </a-popover>
  288. </template>
  289. <template slot="createdAt" slot-scope="text, client, index">
  290. <template v-if="client.created_at">
  291. <template v-if="app.datepicker === 'gregorian'">
  292. [[ DateUtil.formatMillis(client.created_at) ]]
  293. </template>
  294. <template v-else>
  295. [[ DateUtil.convertToJalalian(moment(client.created_at)) ]]
  296. </template>
  297. </template>
  298. <template v-else>
  299. -
  300. </template>
  301. </template>
  302. <template slot="updatedAt" slot-scope="text, client, index">
  303. <template v-if="client.updated_at">
  304. <template v-if="app.datepicker === 'gregorian'">
  305. [[ DateUtil.formatMillis(client.updated_at) ]]
  306. </template>
  307. <template v-else>
  308. [[ DateUtil.convertToJalalian(moment(client.updated_at)) ]]
  309. </template>
  310. </template>
  311. <template v-else>
  312. -
  313. </template>
  314. </template>
  315. {{end}}