OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 60a0699875
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '60a0699875'
${ noResults }
aiforge/web_src/js/components/images/Images.vue

1069 lines
39 kB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <div class="header-wrapper">

  4.       <div class="ui container">

  5.         <el-row class="image_text">

  6.           <h1>{{$i18n['cloudeBrainMirror']['cloud_brain_mirror']}}</h1>

  7.         </el-row>

  8.       </div>

  9.     </div>

  10.     <div class="ui container" id="header">

  11.       <el-tabs v-model="activeName" @tab-click="handleClick">

  12.         <el-tab-pane :label="$i18n['cloudeBrainMirror']['public_mirror']" name="first" v-loading="loadingPublic">

  13.           <template v-if="tableDataPublic.length !== 0">

  14.             <el-row style="align-items: center; display: flex">

  15.               <el-col :span="12">

  16.                 <div>

  17.                   <el-checkbox v-model="checked">{{$i18n['cloudeBrainMirror']['platform_recommendations']}}</el-checkbox>

  18.                 </div>

  19.               </el-col>

  20.               <el-col :span="4"

  21.                 ><div style="visibility: hidden"></div></el-col

  22.               >

  23.               <el-col :span="8">

  24.                 <div>

  25.                   <el-input

  26.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  27.                     v-model="search"

  28.                     class="input-with-select"

  29.                     @keyup.enter.native="searchName()"

  30.                   >

  31.                     <el-button

  32.                       id="success"

  33.                       slot="append"

  34.                       icon="el-icon-search"

  35.                       @click="searchName()"

  36.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  37.                     >

  38.                   </el-input>

  39.                 </div>

  40.               </el-col>

  41.             </el-row>

  42.             <el-row style="margin-top: 15px">

  43.               <el-table

  44.                 :data="tableDataPublic"

  45.                 style="width: 100%"

  46.                 :header-cell-style="tableHeaderStyle"

  47.               >

  48.                 <el-table-column

  49.                   :label="$i18n['cloudeBrainMirror']['mirror_tag']"

  50.                   min-width="19%"

  51.                   align="left"

  52.                   prop="tag"

  53.                 >

  54.                   <template slot-scope="scope">

  55.                     <div style="display: flex; align-items: center">

  56.                       <a class="text-over image_title" :title="scope.row.tag">{{

  57.                         scope.row.tag

  58.                       }}</a>

  59.                       <img

  60.                         v-if="scope.row.type == 5"

  61.                         src="/img/jian.svg"

  62.                         style="margin-left: 0.5rem"

  63.                       />

  64.                     </div>

  65.                   </template>

  66.                 </el-table-column>

  67.                 <el-table-column

  68.                   :label="$i18n['cloudeBrainMirror']['mirror_description']"

  69.                   min-width="28%"

  70.                   align="left"

  71.                   prop="description"

  72.                 >

  73.                   <template slot-scope="scope">

  74.                     <div class="image_desc" :title="scope.row.description">

  75.                       {{ scope.row.description }}

  76.                     </div>

  77.                     <div v-if="!!scope.row.topics">

  78.                       <span

  79.                         v-for="(topic, index) in scope.row.topics"

  80.                         class="ui repo-topic label topic"

  81.                         style="cursor: default"

  82.                         >{{ topic }}</span

  83.                       >

  84.                     </div>

  85.                   </template>

  86.                 </el-table-column>

  87.                 <el-table-column

  88.                   prop="cloudbrainType"

  89.                   :label="$i18n['cloudeBrainMirror']['available_clusters']"

  90.                   min-width="10%"

  91.                   align="center"

  92.                 >

  93.                   <template slot-scope="scope">

  94.                     {{ scope.row.cloudbrainType | transformType }}

  95.                   </template>

  96.                 </el-table-column>

  97.                 <el-table-column

  98.                   prop="creator"

  99.                   :label="$i18n['cloudeBrainMirror']['creator']"

  100.                   min-width="8%"

  101.                   align="center"

  102.                 >

  103.                   <template slot-scope="scope">

  104.                     <a

  105.                       v-if="scope.row.userName || scope.row.relAvatarLink"

  106.                       :href="'/' + scope.row.userName"

  107.                       :title="scope.row.userName"

  108.                     >

  109.                       <img

  110.                         :src="scope.row.relAvatarLink"

  111.                         class="ui avatar image"

  112.                       />

  113.                     </a>

  114.                     <a v-else

  115.                       ><img

  116.                         class="ui avatar image"

  117.                         title="Ghost"

  118.                         src="/user/avatar/ghost/-1"

  119.                     /></a>

  120.                   </template>

  121.                 </el-table-column>

  122.                 <el-table-column

  123.                   prop="updatedUnix"

  124.                   :label="$i18n['cloudeBrainMirror']['creation_time']"

  125.                   align="center"

  126.                   min-width="14%"

  127.                 >

  128.                   <template slot-scope="scope">

  129.                     {{ scope.row.updatedUnix | transformTimestamp }}

  130.                   </template>

  131.                 </el-table-column>

  132.                 <el-table-column align="center" min-width="21%" :label="$i18n['cloudeBrainMirror']['operation']">

  133.                   <template slot-scope="scope">

  134.                     <div

  135.                       style="

  136.                         display: flex;

  137.                         justify-content: flex-end;

  138.                         align-items: center;

  139.                       "

  140.                     >

  141.                       <div

  142.                         style="

  143.                           display: flex;

  144.                           align-items: center;

  145.                           cursor: pointer;

  146.                           padding: 0 1rem;

  147.                         "

  148.                         @click="

  149.                           imageStar(

  150.                             scope.$index,

  151.                             scope.row.id,

  152.                             scope.row.isStar

  153.                           )

  154.                         "

  155.                       >

  156.                         <svg

  157.                           width="1.4em"

  158.                           height="1.4em"

  159.                           viewBox="0 0 32 32"

  160.                           class="heart-stroke"

  161.                           :class="{ stars_active: scope.row.isStar }"

  162.                         >

  163.                           <path

  164.                             d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"

  165.                           ></path>

  166.                         </svg>

  167.                         <span style="line-height: 2; margin-left: 0.3rem">{{

  168.                           scope.row.numStars

  169.                         }}</span>

  170.                       </div>

  171.                       <span

  172.                         style="padding: 0 1rem; color: #0366d6; cursor: pointer"

  173.                         @click="copyUrl(scope.row.place)"

  174.                         >{{$i18n['cloudeBrainMirror']['copy_address']}}</span

  175.                       >

  176.                     </div>

  177.                   </template>

  178.                 </el-table-column>

  179.               </el-table>

  180.             </el-row>

  181.             <div

  182.               class="ui container"

  183.               style="margin-top: 50px; text-align: center"

  184.             >

  185.               <el-pagination

  186.                 background

  187.                 @size-change="handleSizeChangePublic"

  188.                 @current-change="handleCurrentChangePublic"

  189.                 :current-page="currentPagePublic"

  190.                 :page-size="pageSizePublic"

  191.                 :page-sizes="[5, 10, 15]"

  192.                 layout="total, sizes, prev, pager, next, jumper"

  193.                 :total="totalNumPublic"

  194.               >

  195.               </el-pagination>

  196.             </div>

  197.           </template>

  198.           <template v-else>

  199.             <el-row style="align-items: center; display: flex">

  200.               <el-col :span="12">

  201.                 <div>

  202.                   <el-checkbox v-model="checked">{{$i18n['cloudeBrainMirror']['platform_recommendations']}}</el-checkbox>

  203.                 </div>

  204.               </el-col>

  205.               <el-col :span="4"

  206.                 ><div style="visibility: hidden"></div></el-col

  207.               >

  208.               <el-col :span="8">

  209.                 <div>

  210.                   <el-input

  211.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  212.                     v-model="search"

  213.                     class="input-with-select"

  214.                     @keyup.enter.native="searchName()"

  215.                   >

  216.                     <el-button

  217.                       id="success"

  218.                       slot="append"

  219.                       icon="el-icon-search"

  220.                       @click="searchName()"

  221.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  222.                     >

  223.                   </el-input>

  224.                 </div>

  225.               </el-col>

  226.             </el-row>

  227.             <el-empty :image-size="200"></el-empty>

  228.           </template>

  229.         </el-tab-pane>

  230.         <el-tab-pane :label="$i18n['cloudeBrainMirror']['my_mirror']" name="second" v-loading="loadingCustom">

  231.           <template v-if="tableDataCustom.length !== 0">

  232.             <el-row style="align-items: center; display: flex">

  233.               <el-col :span="12">

  234.                 <div style="visibility: hidden">TODO</div>

  235.               </el-col>

  236.               <el-col :span="4"

  237.                 ><div style="visibility: hidden">TODO</div></el-col

  238.               >

  239.               <el-col :span="8">

  240.                 <div>

  241.                   <el-input

  242.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  243.                     v-model="search"

  244.                     class="input-with-select"

  245.                     @keyup.enter.native="searchName()"

  246.                   >

  247.                     <el-button

  248.                       id="success"

  249.                       slot="append"

  250.                       icon="el-icon-search"

  251.                       @click="searchName()"

  252.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  253.                     >

  254.                   </el-input>

  255.                 </div>

  256.               </el-col>

  257.             </el-row>

  258.             <el-row style="margin-top: 15px">

  259.               <el-table

  260.                 :data="tableDataCustom"

  261.                 style="width: 100%"

  262.                 :header-cell-style="tableHeaderStyle"

  263.               >

  264.                 <el-table-column

  265.                   :label="$i18n['cloudeBrainMirror']['mirror_tag']"

  266.                   min-width="19%"

  267.                   align="left"

  268.                   prop="tag"

  269.                 >

  270.                   <template slot-scope="scope">

  271.                     <div style="display: flex; align-items: center">

  272.                       <a class="text-over image_title" :title="scope.row.tag">{{

  273.                         scope.row.tag

  274.                       }}</a

  275.                       >&nbsp;&nbsp;&nbsp;

  276.                       <i

  277.                         class="ri-lock-2-line"

  278.                         style="color: #fa8c16"

  279.                         v-if="scope.row.isPrivate"

  280.                       ></i>

  281.                       <img

  282.                         v-if="scope.row.type == 5"

  283.                         src="/img/jian.svg"

  284.                         style="margin-left: 0.5rem"

  285.                       />

  286.                     </div>

  287.                   </template>

  288.                 </el-table-column>

  289.                 <el-table-column

  290.                   :label="$i18n['cloudeBrainMirror']['mirror_description']"

  291.                   min-width="27%"

  292.                   align="left"

  293.                   prop="description"

  294.                 >

  295.                   <template slot-scope="scope">

  296.                     <div class="image_desc" :title="scope.row.description">

  297.                       {{ scope.row.description }}

  298.                     </div>

  299.                     <div v-if="!!scope.row.topics">

  300.                       <span

  301.                         v-for="(topic, index) in scope.row.topics"

  302.                         class="ui repo-topic label topic"

  303.                         style="cursor: default"

  304.                         >{{ topic }}</span

  305.                       >

  306.                     </div>

  307.                   </template>

  308.                 </el-table-column>

  309.                 <el-table-column

  310.                   prop="cloudbrainType"

  311.                   :label="$i18n['cloudeBrainMirror']['available_clusters']"

  312.                   min-width="9%"

  313.                   align="center"

  314.                 >

  315.                   <template slot-scope="scope">

  316.                     {{ scope.row.cloudbrainType | transformType }}

  317.                   </template>

  318.                 </el-table-column>

  319.                 <el-table-column

  320.                   prop="isPrivate"

  321.                   :label="$i18n['cloudeBrainMirror']['state']"

  322.                   min-width="10%"

  323.                   align="center"

  324.                 >

  325.                   <template slot-scope="scope">

  326.                     <div

  327.                       style="

  328.                         display: flex;

  329.                         align-items: center;

  330.                         justify-content: center;

  331.                       "

  332.                     >

  333.                       <span

  334.                         v-if="scope.row.isPrivate"

  335.                         style="color: rgb(250, 140, 22)"

  336.                         >{{$i18n['cloudeBrainMirror']['private']}}</span

  337.                       >

  338.                       <span v-else style="color: rgb(19, 194, 141)">{{$i18n['cloudeBrainMirror']['public']}}</span>

  339.                       <el-tooltip

  340.                         v-if="scope.row.status === 0"

  341.                         class="item"

  342.                         effect="dark"

  343.                         :content="$i18n['cloudeBrainMirror']['mirror_committed']"

  344.                         placement="top"

  345.                       >

  346.                         <i class="CREATING" style="margin-left: 0.3rem"></i>

  347.                       </el-tooltip>

  348. 

  349.                       <el-tooltip

  350.                         v-if="scope.row.status === 2"

  351.                         class="item"

  352.                         effect="dark"

  353.                         :content="$i18n['cloudeBrainMirror']['check_exceeds_20g']"

  354.                         placement="top"

  355.                       >

  356.                         <i class="FAILED" style="margin-left: 0.3rem"></i>

  357.                       </el-tooltip>

  358. 

  359.                       <el-tooltip

  360.                         v-if="scope.row.status === 1"

  361.                         class="item"

  362.                         effect="dark"

  363.                         :content="$i18n['cloudeBrainMirror']['mirror_submitted']"

  364.                         placement="top"

  365.                       >

  366.                         <i class="SUCCEEDED" style="margin-left: 0.3rem"></i>

  367.                       </el-tooltip>

  368.                     </div>

  369.                   </template>

  370.                 </el-table-column>

  371.                 <el-table-column

  372.                   prop="updatedUnix"

  373.                   :label="$i18n['cloudeBrainMirror']['creation_time']"

  374.                   align="center"

  375.                   min-width="14%"

  376.                 >

  377.                   <template slot-scope="scope">

  378.                     {{ scope.row.updatedUnix | transformTimestamp }}

  379.                   </template>

  380.                 </el-table-column>

  381.                 <el-table-column align="center" min-width="21%" :label="$i18n['cloudeBrainMirror']['operation']">

  382.                   <template slot-scope="scope">

  383.                     <div

  384.                       style="

  385.                         display: flex;

  386.                         justify-content: flex-end;

  387.                         align-items: center;

  388.                       "

  389.                     >

  390.                       <div

  391.                         style="

  392.                           display: flex;

  393.                           align-items: center;

  394.                           cursor: default;

  395.                           padding: 0 1rem;

  396.                         "

  397.                       >

  398.                         <svg

  399.                           width="1.4em"

  400.                           height="1.4em"

  401.                           viewBox="0 0 32 32"

  402.                           class="heart-stroke"

  403.                         >

  404.                           <path

  405.                             d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"

  406.                           ></path>

  407.                         </svg>

  408.                         <span style="line-height: 2; margin-left: 0.3rem">{{

  409.                           scope.row.numStars

  410.                         }}</span>

  411.                       </div>

  412.                       <span

  413.                         style="padding: 0 1rem; color: #0366d6; cursor: pointer"

  414.                         @click="copyUrl(scope.row.place)"

  415.                         >{{$i18n['cloudeBrainMirror']['copy_address']}}</span

  416.                       >

  417.                       <div style="padding-left: 1rem; cursor: pointer">

  418.                         <el-dropdown size="medium">

  419.                           <span class="el-dropdown-link">

  420.                             {{$i18n['cloudeBrainMirror']['more']}}<i

  421.                               class="el-icon-arrow-down el-icon--right"

  422.                             ></i>

  423.                           </span>

  424.                           <el-dropdown-menu slot="dropdown">

  425.                             <el-dropdown-item

  426.                               @click.native="eidtImage(scope.row.id)"

  427.                               >{{$i18n['cloudeBrainMirror']['edit']}}</el-dropdown-item

  428.                             >

  429.                             <el-dropdown-item

  430.                               style="color: red"

  431.                               @click.native="deleteImage(scope.row.id)"

  432.                               >{{$i18n['cloudeBrainMirror']['delete']}}</el-dropdown-item

  433.                             >

  434.                           </el-dropdown-menu>

  435.                         </el-dropdown>

  436.                       </div>

  437.                     </div>

  438.                   </template>

  439.                 </el-table-column>

  440.               </el-table>

  441.             </el-row>

  442.             <div

  443.               class="ui container"

  444.               style="margin-top: 50px; text-align: center"

  445.             >

  446.               <el-pagination

  447.                 background

  448.                 @size-change="handleSizeChangeCustom"

  449.                 @current-change="handleCurrentChangeCustom"

  450.                 :current-page="currentPageCustom"

  451.                 :page-size="pageSizeCustom"

  452.                 :page-sizes="[5, 10, 15]"

  453.                 layout="total, sizes, prev, pager, next, jumper"

  454.                 :total="totalNumCustom"

  455.               >

  456.               </el-pagination>

  457.             </div>

  458.           </template>

  459.           <template v-else>

  460.             <el-row style="align-items: center; display: flex">

  461.               <el-col :span="12">

  462.                 <div style="visibility: hidden"></div>

  463.               </el-col>

  464.               <el-col :span="4"

  465.                 ><div style="visibility: hidden"></div></el-col

  466.               >

  467.               <el-col :span="8">

  468.                 <div>

  469.                   <el-input

  470.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  471.                     v-model="search"

  472.                     class="input-with-select"

  473.                     @keyup.enter.native="searchName()"

  474.                   >

  475.                     <el-button

  476.                       id="success"

  477.                       slot="append"

  478.                       icon="el-icon-search"

  479.                       @click="searchName()"

  480.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  481.                     >

  482.                   </el-input>

  483.                 </div>

  484.               </el-col>

  485.             </el-row>

  486.             <el-empty :image-size="200"></el-empty>

  487.           </template>

  488.         </el-tab-pane>

  489.         <el-tab-pane :label="$i18n['cloudeBrainMirror']['my_favorite_mirror']" name="third">

  490.           <template v-if="tableDataStar.length !== 0">

  491.             <el-row style="align-items: center; display: flex">

  492.               <el-col :span="12">

  493.                 <div style="visibility: hidden"></div>

  494.               </el-col>

  495.               <el-col :span="4"

  496.                 ><div style="visibility: hidden"></div></el-col

  497.               >

  498.               <el-col :span="8">

  499.                 <div>

  500.                   <el-input

  501.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  502.                     v-model="search"

  503.                     class="input-with-select"

  504.                     @keyup.enter.native="searchName()"

  505.                   >

  506.                     <el-button

  507.                       id="success"

  508.                       slot="append"

  509.                       icon="el-icon-search"

  510.                       @click="searchName()"

  511.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  512.                     >

  513.                   </el-input>

  514.                 </div>

  515.               </el-col>

  516.             </el-row>

  517.             <el-row style="margin-top: 15px">

  518.               <el-table

  519.                 :data="tableDataStar"

  520.                 style="width: 100%"

  521.                 :header-cell-style="tableHeaderStyle"

  522.               >

  523.                 <el-table-column

  524.                   :label="$i18n['cloudeBrainMirror']['mirror_tag']"

  525.                   min-width="19%"

  526.                   align="left"

  527.                   prop="tag"

  528.                 >

  529.                   <template slot-scope="scope">

  530.                     <div style="display: flex; align-items: center">

  531.                       <a class="text-over image_title" :title="scope.row.tag">{{

  532.                         scope.row.tag

  533.                       }}</a>

  534.                       <img

  535.                         v-if="scope.row.type == 5"

  536.                         src="/img/jian.svg"

  537.                         style="margin-left: 0.5rem"

  538.                       />

  539.                     </div>

  540.                   </template>

  541.                 </el-table-column>

  542.                 <el-table-column

  543.                   :label="$i18n['cloudeBrainMirror']['mirror_description']"

  544.                   min-width="28%"

  545.                   align="left"

  546.                   prop="description"

  547.                 >

  548.                   <template slot-scope="scope">

  549.                     <div class="image_desc" :title="scope.row.description">

  550.                       {{ scope.row.description }}

  551.                     </div>

  552.                     <div v-if="!!scope.row.topics">

  553.                       <span

  554.                         v-for="(topic, index) in scope.row.topics"

  555.                         class="ui repo-topic label topic"

  556.                         style="cursor: default"

  557.                         >{{ topic }}</span

  558.                       >

  559.                     </div>

  560.                   </template>

  561.                 </el-table-column>

  562.                 <el-table-column

  563.                   prop="cloudbrainType"

  564.                   :label="$i18n['cloudeBrainMirror']['available_clusters']"

  565.                   min-width="10%"

  566.                   align="center"

  567.                 >

  568.                   <template slot-scope="scope">

  569.                     {{ scope.row.cloudbrainType | transformType }}

  570.                   </template>

  571.                 </el-table-column>

  572.                 <el-table-column

  573.                   prop="creator"

  574.                   :label="$i18n['cloudeBrainMirror']['creator']"

  575.                   min-width="8%"

  576.                   align="center"

  577.                 >

  578.                   <template slot-scope="scope">

  579.                     <a

  580.                       v-if="scope.row.userName || scope.row.relAvatarLink"

  581.                       :href="'/' + scope.row.userName"

  582.                       :title="scope.row.userName"

  583.                     >

  584.                       <img

  585.                         :src="scope.row.relAvatarLink"

  586.                         class="ui avatar image"

  587.                       />

  588.                     </a>

  589.                     <a v-else

  590.                       ><img

  591.                         class="ui avatar image"

  592.                         title="Ghost"

  593.                         src="/user/avatar/ghost/-1"

  594.                     /></a>

  595.                   </template>

  596.                 </el-table-column>

  597.                 <el-table-column

  598.                   prop="updatedUnix"

  599.                   :label="$i18n['cloudeBrainMirror']['creation_time']"

  600.                   align="center"

  601.                   min-width="14%"

  602.                 >

  603.                   <template slot-scope="scope">

  604.                     {{ scope.row.updatedUnix | transformTimestamp }}

  605.                   </template>

  606.                 </el-table-column>

  607.                 <el-table-column align="center" min-width="21%" :label="$i18n['cloudeBrainMirror']['operation']">

  608.                   <template slot-scope="scope">

  609.                     <div

  610.                       style="

  611.                         display: flex;

  612.                         justify-content: flex-end;

  613.                         align-items: center;

  614.                       "

  615.                     >

  616.                       <div

  617.                         style="

  618.                           display: flex;

  619.                           align-items: center;

  620.                           cursor: pointer;

  621.                           padding: 0 1rem;

  622.                         "

  623.                         @click="imageUnstar(scope.row.id)"

  624.                       >

  625.                         <svg

  626.                           width="1.4em"

  627.                           height="1.4em"

  628.                           viewBox="0 0 32 32"

  629.                           class="heart-stroke stars_active"

  630.                         >

  631.                           <path

  632.                             d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"

  633.                           ></path>

  634.                         </svg>

  635.                         <span style="line-height: 2; margin-left: 0.3rem">{{

  636.                           scope.row.numStars

  637.                         }}</span>

  638.                       </div>

  639.                       <span

  640.                         style="padding: 0 1rem; color: #0366d6; cursor: pointer"

  641.                         @click="copyUrl(scope.row.place)"

  642.                         >{{$i18n['cloudeBrainMirror']['copy_address']}}</span

  643.                       >

  644.                     </div>

  645.                   </template>

  646.                 </el-table-column>

  647.               </el-table>

  648.             </el-row>

  649.             <div

  650.               class="ui container"

  651.               style="margin-top: 50px; text-align: center"

  652.             >

  653.               <el-pagination

  654.                 background

  655.                 @size-change="handleSizeChangeStar"

  656.                 @current-change="handleCurrentChangeStar"

  657.                 :current-page="currentPageStar"

  658.                 :page-size="pageSizeStar"

  659.                 :page-sizes="[5, 10, 15]"

  660.                 layout="total, sizes, prev, pager, next, jumper"

  661.                 :total="totalNumStar"

  662.               >

  663.               </el-pagination>

  664.             </div>

  665.           </template>

  666. 

  667.           <template v-else>

  668.             <el-row style="align-items: center; display: flex">

  669.               <el-col :span="12">

  670.                 <div style="visibility: hidden"></div>

  671.               </el-col>

  672.               <el-col :span="4"

  673.                 ><div style="visibility: hidden"></div></el-col

  674.               >

  675.               <el-col :span="8">

  676.                 <div>

  677.                   <el-input

  678.                     :placeholder="$i18n['cloudeBrainMirror']['placeholder']"

  679.                     v-model="search"

  680.                     class="input-with-select"

  681.                     @keyup.enter.native="searchName()"

  682.                   >

  683.                     <el-button

  684.                       id="success"

  685.                       slot="append"

  686.                       icon="el-icon-search"

  687.                       @click="searchName()"

  688.                       >{{$i18n['cloudeBrainMirror']['search']}}</el-button

  689.                     >

  690.                   </el-input>

  691.                 </div>

  692.               </el-col>

  693.             </el-row>

  694.             <el-empty :image-size="200"></el-empty>

  695.           </template>

  696.         </el-tab-pane>

  697.       </el-tabs>

  698.     </div>

  699.   </div>

  700. </template>

  701. 

  702. <script>

  703. const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;

  704. 

  705. export default {

  706.   components: {},

  707.   data() {

  708.     return {

  709.       activeName: "first",

  710.       search: "",

  711.       checked: false,

  712.       currentPagePublic: 1,

  713.       pageSizePublic: 10,

  714.       totalNumPublic: 0,

  715.       paramsPublic: { page: 1, pageSize: 10, q: "", recommend: false },

  716.       tableDataPublic: [],

  717.       loadingPublic: false,

  718. 

  719.       currentPageCustom: 1,

  720.       pageSizeCustom: 10,

  721.       totalNumCustom: 0,

  722.       paramsCustom: { page: 1, pageSize: 10, q: "" },

  723.       tableDataCustom: [],

  724.       starCustom: [],

  725.       loadingCustom: false,

  726.       refreshCustomTimer: null,

  727. 

  728.       currentPageStar: 1,

  729.       pageSizeStar: 10,

  730.       totalNumStar: 0,

  731.       paramsStar: { page: 1, pageSize: 10, q: "" },

  732.       tableDataStar: [],

  733.       loadingStar: false,

  734.     };

  735.   },

  736.   methods: {

  737.     handleClick(tab, event) {

  738.       this.search = "";

  739.       this.stopImageListCustomRefresh();

  740.       if (tab.name == "first") {

  741.         this.paramsPublic.q = "";

  742.         this.getImageListPublic();

  743.       }

  744.       if (tab.name == "second") {

  745.         this.getImageListCustom();

  746.       }

  747.       if (tab.name == "third") {

  748.         this.getImageListStar();

  749.       }

  750.     },

  751.     tableHeaderStyle({ row, column, rowIndex, columnIndex }) {

  752.       if (rowIndex === 0) {

  753.         return "background:#f5f5f6;color:#606266";

  754.       }

  755.     },

  756.     handleSizeChangePublic(val) {

  757.       this.paramsPublic.pageSize = val;

  758.       this.getImageListPublic();

  759.     },

  760.     handleCurrentChangePublic(val) {

  761.       this.currentPagePublic = val;

  762.       this.paramsPublic.page = val;

  763.       this.getImageListPublic();

  764.     },

  765.     handleSizeChangeCustom(val) {

  766.       this.paramsCustom.pageSize = val;

  767.       this.getImageListCustom();

  768.     },

  769.     handleCurrentChangeCustom(val) {

  770.       this.paramsCustom.page = val;

  771.       this.getImageListCustom();

  772.     },

  773.     handleSizeChangeStar(val) {

  774.       this.paramsStar.pageSize = val;

  775.       this.getImageListStar();

  776.     },

  777.     handleCurrentChangeStar(val) {

  778.       this.paramsStar.page = val;

  779.       this.getImageListStar();

  780.     },

  781.     getImageListPublic() {

  782.       this.loadingPublic = true;

  783.       this.$axios

  784.         .get("/explore/images/public", {

  785.           params: this.paramsPublic,

  786.         })

  787.         .then((res) => {

  788.           this.totalNumPublic = res.data.count;

  789.           this.tableDataPublic = res.data.images;

  790.           this.loadingPublic = false;

  791.         });

  792.     },

  793. 

  794.     getImageListCustom() {

  795.       this.loadingCustom = true;

  796.       this.$axios

  797.         .get("/explore/images/custom", {

  798.           params: this.paramsCustom,

  799.         })

  800.         .then((res) => {

  801.           this.totalNumCustom = res.data.count;

  802.           this.tableDataCustom = res.data.images;

  803.           this.tableDataCustom.forEach((element) => {

  804.             this.starCustom.push({ id: element.id });

  805.           });

  806.           this.loadingCustom = false;

  807.           this.getImageListCustomRefresh();

  808.         });

  809.     },

  810. 

  811.     getImageListCustomRefresh() {

  812.       this.stopImageListCustomRefresh();

  813.       this.refreshCustomTimer = setInterval(() => {

  814.         this.tableDataCustom.forEach((item) => {

  815.           if (item.status === 0) {

  816.             this.$axios.get(`/image/${item.id}`, {}).then((res) => {

  817.               const newData = res.data;

  818.               this.tableDataCustom.forEach((it) => {

  819.                 if (it.id === newData.id) {

  820.                   it.status = newData.status;

  821.                 }

  822.               });

  823.             });

  824.           }

  825.         });

  826.       }, 5000);

  827.     },

  828. 

  829.     stopImageListCustomRefresh() {

  830.       this.refreshCustomTimer && clearInterval(this.refreshCustomTimer);

  831.     },

  832.     getImageListStar() {

  833.       this.loadingStar = true;

  834.       this.$axios

  835.         .get("/explore/images/star", {

  836.           params: this.paramsStar,

  837.         })

  838.         .then((res) => {

  839.           this.totalNumStar = res.data.count;

  840.           this.tableDataStar = res.data.images;

  841.           this.loadingStar = false;

  842.         });

  843.     },

  844. 

  845.     deleteImage(id) {

  846.       let flag = 1;

  847.       let _this = this;

  848.       $(".ui.basic.modal.images")

  849.         .modal({

  850.           onDeny: function () {

  851.             flag = false;

  852.           },

  853.           onApprove: function () {

  854.             _this.$axios.delete("/image/" + id).then((res) => {

  855.               _this.getImageListCustom();

  856.             });

  857.             flag = true;

  858.           },

  859.           onHidden: function () {

  860.             if (flag == false) {

  861.               $(".alert")

  862.                 .html(_this.$i18n['canceled_operation'])

  863.                 .removeClass("alert-success")

  864.                 .addClass("alert-danger")

  865.                 .show()

  866.                 .delay(1500)

  867.                 .fadeOut();

  868.             } else {

  869.               $(".alert")

  870.                 .html(_this.$i18n['successfully_deleted'])

  871.                 .removeClass("alert-danger")

  872.                 .addClass("alert-success")

  873.                 .show()

  874.                 .delay(1500)

  875.                 .fadeOut();

  876.             }

  877.           },

  878.         })

  879.         .modal("show");

  880.     },

  881.     eidtImage(id) {

  882.       location.href = `/image/${id}/imageSquare`;

  883.     },

  884.     imageStar(index, id, isStar) {

  885.       if (isStar) {

  886.         this.$axios.put(`/image/${id}/action/unstar`).then((res) => {

  887.           if (res.data.Code == 0) {

  888.             this.tableDataPublic[index].numStars =

  889.               this.tableDataPublic[index].numStars - 1;

  890.             this.tableDataPublic[index].isStar = false;

  891.           } else {

  892.             console.log(res.data.Message);

  893.           }

  894.         });

  895.       } else {

  896.         this.$axios.put(`/image/${id}/action/star`).then((res) => {

  897.           if (res.data.Code == 0) {

  898.             this.tableDataPublic[index].numStars =

  899.               this.tableDataPublic[index].numStars + 1;

  900.             this.tableDataPublic[index].isStar = true;

  901.           } else {

  902.             console.log(res.data.Message);

  903.           }

  904.         });

  905.       }

  906.     },

  907.     imageUnstar(id) {

  908.       this.$axios.put(`/image/${id}/action/unstar`).then((res) => {

  909.         if (res.data.Code == 0) {

  910.           this.getImageListStar();

  911.         } else {

  912.           console.log(res.data.Message);

  913.         }

  914.       });

  915.     },

  916.     copyUrl(url) {

  917.       const cInput = document.createElement("input");

  918.       cInput.value = url;

  919.       document.body.appendChild(cInput);

  920.       cInput.select();

  921.       document.execCommand("Copy");

  922.       cInput.remove();

  923.       $("body").toast({

  924.         message: this.$i18n['cloudeBrainMirror']['copy_succeeded'],

  925.         showProgress: "bottom",

  926.         showIcon: "check circle",

  927.         class: "info",

  928.         position: "top right",

  929.       });

  930.     },

  931.     searchName() {

  932.       if (this.activeName == "first") {

  933.         this.paramsPublic.q = this.search;

  934.         this.paramsPublic.page = 1;

  935.         this.getImageListPublic();

  936.       }

  937.       if (this.activeName == "second") {

  938.         this.paramsCustom.q = this.search;

  939.         this.paramsCustom.page = 1;

  940.         this.getImageListCustom();

  941.       }

  942.       if (this.activeName == "third") {

  943.         this.paramsStar.q = this.search;

  944.         this.paramsStar.page = 1;

  945.         this.getImageListStar();

  946.       }

  947.     },

  948.   },

  949.   filters: {

  950.     transformType(val) {

  951.       if (val == 0 || val == 2) {

  952.         return "GPU";

  953.       }

  954.     },

  955.     transformPravite(val) {

  956.       if (val) {

  957.         return this.$i18n['cloudeBrainMirror']['private'];

  958.       } else {

  959.         return this.$i18n['cloudeBrainMirror']['public'];

  960.       }

  961.     },

  962.     transformTimestamp(timestamp) {

  963.       const date = new Date(parseInt(timestamp) * 1000);

  964.       const Y = date.getFullYear() + "-";

  965.       const M =

  966.         (date.getMonth() + 1 < 10

  967.           ? "0" + (date.getMonth() + 1)

  968.           : date.getMonth() + 1) + "-";

  969.       const D =

  970.         (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";

  971.       const h =

  972.         (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";

  973.       const m =

  974.         (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +

  975.         ":";

  976.       const s =

  977.         date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); // 秒

  978.       const dateString = Y + M + D + h + m + s;

  979.       return dateString;

  980.     },

  981.   },

  982.   watch: {

  983.     checked(val) {

  984.       this.paramsPublic.page = 1;

  985.       this.paramsPublic.recommend = val;

  986.       this.currentPagePublic = 1;

  987.       this.getImageListPublic();

  988.     },

  989.   },

  990.   mounted() {},

  991.   created() {

  992.     this.$i18n = window.i18n;

  993.     const params = new URLSearchParams(location.search);

  994.     if (params.has("type") && params.get("type") == "myimage") {

  995.       this.activeName = "second";

  996.       this.getImageListCustom();

  997.     } else {

  998.       this.getImageListPublic();

  999.     }

  1000.   },

  1001.   beforeDestroy() {

  1002.     this.stopImageListCustomRefresh();

  1003.   },

  1004. };

  1005. </script>

  1006. 

  1007. <style scoped>

  1008. .header-wrapper {

  1009.   background-color: #f5f5f6;

  1010.   padding-top: 15px;

  1011. }

  1012. .image_text {

  1013.   padding: 25px 0 55px 0;

  1014. }

  1015. #header {

  1016.   position: relative;

  1017.   top: -40px;

  1018. }

  1019. .el-dropdown-menu__item--divided {

  1020.   border-top: 1px solid blue;

  1021. }

  1022. .el-table thead {

  1023.   background-color: #f5f5f6;

  1024. }

  1025. /deep/ .el-tabs__item:hover {

  1026.   color: #000;

  1027.   font-weight: 500;

  1028. }

  1029. /deep/ .el-tabs__item.is-active {

  1030.   color: #000;

  1031.   font-weight: 500;

  1032. }

  1033. /deep/ .el-tabs__active-bar {

  1034.   background-color: #000;

  1035. }

  1036. 

  1037. #success {

  1038.   background-color: #5bb973;

  1039.   color: white;

  1040. }

  1041. .text-over {

  1042.   overflow: hidden;

  1043.   text-overflow: ellipsis;

  1044.   vertical-align: middle;

  1045.   white-space: nowrap;

  1046. }

  1047. .image_title {

  1048.   display: inline-block;

  1049.   cursor: default;

  1050.   color: rgb(66, 98, 144);

  1051. }

  1052. .image_desc {

  1053.   -webkit-line-clamp: 2;

  1054.   -webkit-box-orient: vertical;

  1055.   display: -webkit-box;

  1056.   text-overflow: ellipsis;

  1057.   overflow: hidden;

  1058. }

  1059. .heart-stroke {

  1060.   stroke: #fa8c16;

  1061.   stroke-width: 2;

  1062.   fill: #fff;

  1063. }

  1064. .stars_active {

  1065.   fill: #fa8c16 !important;

  1066.   stroke: #fa8c16 !important;

  1067. }

  1068. </style>